Animation-ominaisuus

Ominaisuus animation on lyhenne animaatio-ominaisuuksille, jonka avulla voit määrittää kaikki animaatio-ominaisuudet kerralla: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Arvojen järjestyksellä ei ole väliä, animaation keston animation-duration on oltava pakosti viiveen animation-delay edellä. Vain ominaisuudet animation-name ja animation-duration ovat pakollisia.

Ominaisuus voi myös saada arvon none, joka poistaa animaation kokonaan. Tämä arvo on oletusarvo.

Syntaksi

valitsija {
	animation: arvot;
}

Esimerkki

Tässä esimerkissä animaatiolla on 3 sekunnin viive (ennen jokaista uutta toistokertaa), minkä jälkeen animaatio toistuu 6 sekunnin ajan:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Esimerkki . Mahdolliset ongelmat

Lyhyessä muodossa kirjoitettu animaatio voi olla toimimatta nimensä vuoksi. Tarkastellaan seuraavaa animaatiota:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Huomaa, että käytän animaation nimenä reverse. Ensi silmäyksellä kaikki näyttää hyvältä, mutta animaatio ei toimi, koska reverse on kelvollinen avainsana ominaisuudelle animation-direction.

Myöskään animaatio ei toimi, jos lyhyttä muotoa käytettäessä nimessä on muita avainsanoja. Mutta kaikki toimii hyvin, kun käytetään "täydellistä" kuvaustapaa.

Avainsanoihin, jotka rikkovat animaatiot, kuuluvat animation-direction -ominaisuuden avainsanat, sekä liukufunktioiden liittyvät avainsanat, sekä infinite, alternate, running, paused ja niin edelleen.

Katso myös

komennon @keyframes,
joka määrittää animaation avainkehykset
liukueet siirtymät transition, jotka edustavat elementin päälle kohdistuvan animaation