5.10 CSS animáció

A CSS3 segítségével lehet animációkat készíteni egyszerűen (a közelmúltban vagy három napig készítettem egy animációt, amire úgy működött, ahogyan akartam). Két lehetőségünk van: 1. Elnevezem az animációt egy tetszőleges névvel, majd bizonyos utasításokban hivatkozom erre a névre. A CSS részben beállítunk egy Animáció definíciót:

@keyframes pelda01{
    from( background-color: red;}
    to { background-color: yellow;}
}

div{
    width: 100px;
    height: 200px;
    background-color: red;
    animation-name: pelda01;
    animation-duration: 4s;
}

Ez a definíció 4 másodperc alatt állítja át a div háttérszínét.

Ezt a definíciót lehet egy kicsit cizellálni, hogyha az áttűnés tulajdonságait módosítani akarom.

@keyframes pelda02{
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div{
    width: 100px;
    height: 200px;
    background-color: red;
    animation-name: pelda02;
    animation-duration: 4s;
}

Lehet egy időben több tulajdonságot is módosítani az animációval:

@keyframes pelda03{
  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;}
}

div{
    width: 100px;
    height: 200px;
    background-color: red;
    animation-name: pelda03;
    animation-duration: 4s;
}

Az animáció kezdetét el lehet tolni valamennyi idővel az

animation-delay: másodperc

paranccsal.