CSS animációk

Tartalomjegyzék

Tartalomjegyzék megjelenítése

CSS animációk

A CSS lehetővé teszi a HTML elemek animációját JavaScript vagy Flash használata nélkül!

CSS

Ebben a fejezetben a következő tulajdonságokat ismerheti meg:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Böngésző támogatása animációkhoz

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

Property
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

Mik azok a CSS-animációk?

Az animáció lehetővé teszi, hogy egy elem fokozatosan egyik stílusról a másikra váltson.

Annyi CSS-tulajdonságot módosíthat, ahányszor csak akar.

A CSS-animáció használatához először meg kell adnia néhány kulcskockát a élénkség.

A kulcskockák tartalmazzák, hogy az elem bizonyos időpontokban milyen stílusokkal rendelkezik.

A @keyframes szabály

Ha CSS-stílusokat ad meg a @keyframes-ban szabály szerint az animáció fokozatosan változik az aktuális stílusról az új stílusra bizonyos időpontokban.

Az animáció működéséhez az animációt egy elemhez kell kötni.

A következő példa az "example" animációt a <div> elemhez köti. Az animáció 4 másodpercig tart, és fokozatosan megváltoztatja a a <div> elem háttérszíne "pirosról" "sárgára":

Példa

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Megjegyzés: Az animation-duration tulajdonság meghatározza, hogy mennyi ideig kell tartania egy animációnak. Ha az animation-duration tulajdonság nincs megadva, nem lesz animáció, mert az alapértelmezett érték 0s (0 másodperc).

A fenti példában megadtuk, hogy a stílus mikor változik meg a használatával a "tól" és a "ig" kulcsszavak (ami 0% (kezdet) és 100% (teljes)).

Lehetőség van százalékos felhasználásra is. A százalék használatával annyit adhat hozzá a stílus tetszés szerint változik.

A következő példa megváltoztatja a <div> háttérszínét elemet, ha az animáció 25%-ban kész, 50%-ban kész, és újra, ha az animáció 100%-ban kész:

Példa

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

A következő példa a háttérszínt és a <div> pozícióját is megváltoztatja elemet, ha az animáció 25%-ban kész, 50%-ban kész, és újra, ha az animáció 100%-ban kész:

Példa

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Animáció késleltetése

Az animation-delay tulajdonság késleltetést ad meg egy animáció indításához.

A következő példában 2 másodperces késleltetés van az animáció elindítása előtt:

Példa

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

Negatív értékek is megengedettek. Negatív értékek használata esetén az animáció úgy indul, mintha már N másodpercig játszott volna.

A következő példában az animáció úgy indul, mintha már megvolt volna játék 2 másodpercig:

Példa

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

Állítsa be, hogy hányszor fusson egy animáció

Az animation-iteration-count tulajdonság megadja, hogy egy animációnak hányszor kell futnia.

A következő példa háromszor futtatja le az animációt, mielőtt leállna:

Példa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

A következő példa a "végtelen" értéket használja az animáció elkészítéséhez folytasd örökké:

Példa

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Futtassa az animációt fordított irányban vagy váltakozó ciklusokban

Az animation-direction tulajdonság határozza meg hogy egy animációt előre, hátra vagy felváltva kell-e lejátszani ciklusok.

Az animációs irány tulajdonságnak a következő értékei lehetnek:

normal: - Az animációt a szokásos módon játssza le (előre). Ez az alapértelmezett
reverse: - Az animációt fordított irányban (visszafelé) játssza le
alternate: - Az animációt először előre, majd visszafelé játssza le
alternate-reverse: - Az animációt először hátrafelé, majd előrefelé játssza le

A következő példa az animációt fordított irányban (visszafelé) futtatja:

Példa

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

A következő példa az "alternate" értéket használja az animáció létrehozásához fuss először előre, majd hátra:

Példa

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

A következő példa az "alternate-reverse" értéket használja az animáció elkészítéséhez fuss először hátra, majd előre:

Példa

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

Adja meg az animáció sebességgörbéjét

Az animation-timing-function tulajdonság megadja a sebességgörbét élénkség.

Az animation-timing-function tulajdonságnak a következő értékei lehetnek:

ease: - Lassan kezdődő, majd gyors, majd lassan befejeződő animációt ad meg (ez az alapértelmezett)
linear: - Az elejétől a végéig azonos sebességű animációt határoz meg
ease-in: - Lassú indítású animációt határoz meg
ease-out: - Lassú végű animációt határoz meg
ease-in-out: - Lassú kezdetű és végű animációt határoz meg
cubic-bezier(n,n,n,n): - Lehetővé teszi saját értékek meghatározását egy kocka-bezier függvényben

A következő példa néhány használható sebességgörbét mutat be:

Példa

#div1 {animation-timing-function: linear;}
#div2 
{animation-timing-function: ease;}
#div3 {animation-timing-function: 
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 
{animation-timing-function: ease-in-out;}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Adja meg az animáció kitöltési módját

A CSS-animációk az első kulcskocka lejátszása előtt nem befolyásolják az elemeket vagy az utolsó kulcskép lejátszása után. Az animáció-kitöltés mód tulajdonság lehet felülírja ezt a viselkedést.

Az animation-fill-mode tulajdonság egy stílus a célelemhez, amikor az animáció nem játszik le (előtte kezdődik, miután véget ér, vagy mindkettő).

Az animation-fill-mode tulajdonságnak a következő értékei lehetnek:

none: - Alapértelmezett érték. Az animáció semmilyen stílust nem alkalmaz az elemre a végrehajtás előtt vagy után
forwards: - Az elem megtartja az utolsó kulcsképkocka által beállított stílusértékeket (az animáció irányától és az animáció iterációs számától függően)
backwards: - Az elem megkapja az első kulcsképkocka által beállított stílusértékeket (az animáció irányától függően), és megtartja ezeket az animáció késleltetési időszaka alatt
both: - Az animáció mind az előre, mind a hátrafelé vonatkozó szabályokat követi, mindkét irányba kiterjesztve az animáció tulajdonságait

A következő példa lehetővé teszi, hogy a <div> elem megtartsa a stílusértékeket utolsó kulcsképkocka az animáció végén:

Példa

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

A következő példa lehetővé teszi, hogy a <div> elem megkapja az által beállított stílusértékeket első kulcsképkocka az animáció megkezdése előtt (az animáció késleltetési időszaka alatt):

Példa

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

A következő példa lehetővé teszi, hogy a <div> elem megkapja a beállított stílusértékeket az első kulcskockával az animáció megkezdése előtt, és megtartja a stílusértékeket az utolsó kulcskockától, amikor az animáció véget ér:

Példa

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Animációs gyorsírás tulajdonság

Az alábbi példa hat animációs tulajdonságot használ:

Példa

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

A fentiekkel megegyező animációs hatás érhető el a gyorsírás használatával animáció tulajdonság:

Példa

div
{
    animation: example 5s linear 2s infinite alternate;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

CSS-animáció tulajdonságai

Az alábbi táblázat felsorolja a @keyframes szabályt és az összes CSS-animációs tulajdonságot:

@keyframes: Megadja az animációs kódot
animation: Egy rövidített tulajdonság az összes animációs tulajdonság beállításához
animation-delay: Megadja az animáció indításának késleltetését
animation-direction: Meghatározza, hogy egy animációt előre, hátra vagy vissza kell-e játszani váltakozó ciklusokban
animation-duration: Meghatározza, hogy egy animáció mennyi ideig tart egy ciklus befejezéséhez
animation-fill-mode: Megadja az elem stílusát, amikor az animáció nem játszik le (mielőtt elkezdődik, miután véget ér, vagy mindkettő)
animation-iteration-count: Meghatározza, hogy egy animációt hányszor kell lejátszani
animation-name: Megadja a @keyframes animáció nevét
animation-play-state: Meghatározza, hogy az animáció fut-e vagy szünetel
animation-timing-function: Megadja az animáció sebességgörbéjét