CSS3 animáció

by Szabó Viktor · Published 2012/12/09 · Updated 2016/10/22

A következőkben a CSS3 animációs képességeit, azok használatának módját szeretném bemutatni nektek. A CSS3 animációt a piacon levő böngészők közül csak az Internet Explorer nem támogatja, így érdemes valamelyik másikat is beszerezni, ha még nem rendelkezel vele; például a Firefoxot vagy a Chrome-ot.

Ez a kis kitérő után tekintsük át, hogy miként is működik a CSS3 animáció:

@keyframes – A segítségével definiálhatjuk magát az animációt, from{ paraméterek } – to { paraméterek } vagy %-os értékekkel, ahogy a példámban is láthatjátok majd.
animation – A rövid forma segítségével lehet megadni az alábbi opciókat.
animation: |name |duration| timing-function| delay |iteration-count| direction;
animation-name – A @keyframes animációnk egyedi nevét adhatjuk meg a segítségével.
animation-duration – Az animáció hosszát, időtartamát definiáljuk vele. Alapértelmezésben: 0. Pl.: animation-duration: 5s;
animation-timing-function – Az animáció módját állítjuk vele. Alapértelmezésben: „ease”
Opciói:
linear – Egyenletes sebességgel halad az animáció „elejétől a végéig” (javasolt)
ease – Lassan indul, majd gyorsul és a végén újra lassan fejeződik be.
ease-in – Lassan induló, majd normál tempóban megy végig az animáció
ease-out – Normál tempóban kezdődő és lassan végződő animáció
ease-in-out – Lassan induló és végződő animáció
animation-delay – Az animáció indulásának késleltetése. Alapértelmezésben 0 Pl.: animation-delay:2s; (2 másodperccel késleltetve)
animation-iteration-count – A segítségével megadhatjuk, hogy hányszor játssza le az animációt. Alapértelmezésben 1
animation-direction – Az animáció irányát adhatjuk meg vele. Alapértelmezésben „normal” Opcionálisan „alternate” (nálam a példában backwards)
animation-play-state – Az animáció szüneteltetésére és futtatására adhatunk vele utasítást. Alapértelmezésben „running” Opcionálisan „paused”

Mivel a CSS3 még nem teljes-körűen támogatott célszerű mindent a böngészőknek kedvezve definiálni, pl. így:

animation: animaciom 5s linear; /* egységes */
 -moz-animation:animaciom 5s linear; /* Firefox */
 -webkit-animation:animaciom 5s linear; /* Safari és Chrome */
 -o-animation:animaciom 5s linear; /* Opera */

Az első példában a from-to paraméterezésre szeretnék egy egyszerű példát bemutatni nektek. Egy animált négyzetet készítünk, ami fentről indul majd 300px-t zuhan 5 másodperc alatt, azután újrakezdi.

<html>
<head>
<style>
div
{
width:150px; /*négyzet definiálása*/
height:150px;
background:red;
position:relative;
animation:negyzet 5s infinite; /*5 másodperc alatt, "loop"-olva*/
-moz-animation:negyzet 5s infinite; /* Firefox */
-webkit-animation:negyzet 5s infinite; /* Safari és Chrome */
-o-animation:negyzet 5s infinite; /* Opera */
}

@keyframes negyzet
{
from {top:0px;}
to {top:300px;}
}

@-moz-keyframes negyzet/* Firefox */
{
from {top:0px;}
to {top:300px;}
}

@-o-keyframes negyzet/* Opera */
{
from {top:0px;}
to {top:300px;}
}

@-webkit-keyframes negyzet/* Safari és Chrome */
{
from {top:0px;}
to {top:300px;}
}

</style>
</head>
<body>
<div></div>

</body>
</html>

A működő példát itt meg tudod tekinteni.

A következő példában a %-os definíciót fogjuk használni. A feladat megegyezik a fentivel.


<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:150px; /*négyzet definiálása*/
height:150px;
background:red;
position:relative;
animation:negyzet 5s infinite; /*5 másodperc alatt, "loop"-olva*/
-moz-animation:negyzet 5s infinite; /* Firefox */
-webkit-animation:negyzet 5s infinite; /* Safari és Chrome */
-o-animation:negyzet 5s infinite; /* Opera */
}

@keyframes negyzet
{
0% {
top:0px;
}
25% {
top: 70px
}
50%{
top: 140px
}
75%{
top: 210px
}
100%{
top:300px;
}
}

@-moz-keyframes negyzet/* Firefox */
{
0% {
top:0px;
}
25% {
top: 70px
}
50%{
top: 140px
}
75%{
top: 210px
}
100%{
top:300px;
}
}

@-o-keyframes negyzet/* Opera */
{
0% {
top:0px;
}
25% {
top: 70px
}
50%{
top: 140px
}
75%{
top: 210px
}
100%{
top:300px;
}
}

@-webkit-keyframes negyzet/* Safari és Chrome */
{
0% {
top:0px;
}
25% {
top: 70px
}
50%{
top: 140px
}
75%{
top: 210px
}
100%{
top:300px;
}
}

</style>
</head>
<body>
<div></div>

</body>
</html>

A példát itt tudjátok megnézni.

Ha megnéztétek mind a két példát, biztosan észre vettétek, hogy a második példában, a négyzet a definiált százalékoknál egy pillanatra megáll. A két definíciós mód között első körben ez a legszembetűnőbb különbség. Természetesen, ezt könnyen orvosolhatjuk, ha a közbenső értékeket (25%,50% és 75%) töröljük a példából, így tökéletes lesz az átmenet a %-os értékek segítségével is. Viszont, megjegyzem, hogy egy összetett animáció esetén a %-os paraméterezés könnyebben használható.

Tehát a megtorpanások nélküli %-os kód a következő:


<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:150px; /*négyzet definiálása*/
height:150px;
background:red;
position:relative;
animation:negyzet 5s infinite; /*5 másodperc alatt, "loop"-olva*/
-moz-animation:negyzet 5s infinite; /* Firefox */
-webkit-animation:negyzet 5s infinite; /* Safari és Chrome */
-o-animation:negyzet 5s infinite; /* Opera */
}

@keyframes negyzet
{
0% {
top:0px;
}
100%{
top:300px;
}
}

@-moz-keyframes negyzet/* Firefox */
{
0% {
top:0px;
}
100%{
top:300px;
}
}

@-o-keyframes negyzet/* Opera */
{
0% {
top:0px;
}
100%{
top:300px;
}
}

@-webkit-keyframes negyzet/* Safari és Chrome */
{
0% {
top:0px;
}
100%{
top:300px;
}
}

</style>
</head>
<body>
<div></div>

</body>
</html>

A demót itt tudjátok megnézni.

Forrás:

http://dev.w3.org/csswg/css3-animations/