CSS Animaties

let's move

Geschreven door: op

In dit artikel wil ik je meenemen in de coole wereld van animatie! M.b.v. CSS3 kun je animaties maken waar dit voorheen voornamelijk gedaan werd met:

  • Flash
  • Animated GIF's
  • Javascript

Sinds CSS3 is daar dus een extra mogelijkheid bijgekomen, namelijk animatie d.m.v. CSS. 

De meeste CSS animatie mogelijkheden worden in de meeste gevallen ondersteund vanaf IE10. De basis van CSS3 animatie bestaat uit de volgende 4 onderdelen:

  1. CSS3 Transitions
  2. CSS3 Transforms
  3. CSS3 Animations
  4. CSS3 Filters

CSS3 Transitions

<div id="transitions_demo" class="shadow hover">
  <div id="ease" class="test_box">Ease</div>
  <div id="ease-in" class="test_box">Ease In</div>
  <div id="ease-out" class="test_box">Ease Out</div>
  <div id="ease-in-out" class="test_box">Ease In Out</div>
  <div id="linear" class="test_box">Linear</div>
  <div id="custom" class="test_box">Custom</div>
  <div id="negative" class="test_box">Awesome!</div>
</div>

Ieder effect op een element met de 'text_box'-class wordt, m.b.v. CSS, aangestuurd d.m.v. onderstaande CSS:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Het effect (ease) kan vervangen worden met de volgende effecten: ease-in, ease-out, ease-in-out, linear, cubic-bezier(3 waardes) en cubic-bezier(4 waardes).

Onderstaande demo wordt geactiveerd door de zgn. hover-functie hieronder.

#transitions_demo:hover .test_box, #transitions_demo.hover_effect .test_box {
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
    margin-left:420px;
    background-color:#fff;
  }

Om uiteindelijk het onderstaande resultaat te bereiken.

Ease
Ease In
Ease Out
Ease In Out
Linear
Custom
Awesome!
CSS Animaties

Trefwoorden:

Aantal keer bekeken: 2.599