Jak zrobić animację CSS

Question

Jak zrobić animację (stopniowe pojawienie i znikanie box-shadow w class'ie .option:hover) po najechaniu i zjechaniu kursora z diva w CSS?

CSS:

.option
{
	background-color: rgba(10, 70, 255, 0.05);
	padding: 20px;
	border-bottom: 1px dotted #006ba9;
	font-size: 20px;
}

.option:hover
{
	cursor: pointer;
	box-shadow: inset 3px 3px 13px rgba(0, 0, 20, 0.2), inset -3px -3px 13px rgba(0, 0, 20, 0.2);
}

HTML:

<div class="option" style="border-top: 1px dotted #006ba9; margin-top: 15px;" onclick="location.href='index.php'" class="option-anim">Home</div>

 

Answer 1

Użyć transition → https://developer.mozilla.org/en/docs/Web/CSS/transition

Comments

Jak zrobić, żeby class'a .option wczytała się tylko jeden raz, a nie za każdym razem, kiedy odświeżam stronę?

---

Najlepiej utworzyć sesję lub ciasteczko mówiące o odwiedzeniu wcześniej tej strony i wg. tego generować class.

---

Hmm… nie powinno się animować tuż po wejściu, bo tak za bardzo to nie ma co.

@Pietrak, po stronie klienta nie ma sensu wykorzystywać ciastek, skoro jest Web Storage API → https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Answer 2

Hint: CSS transition