CSS3 animáció

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/

Creative Commons Licenc
CSS3 animáció   a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...