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 */
<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/
