Animaties

(Animations)

Cascading Style Sheets

Animaties

@keyframes example {
 from { transform: scale(1.0); }
 to   { transform: scale(2.0); }
}
div {
 animation-name:example;
 animation-duration:1s;
 animation-timing-function:ease;   /* default */
 animation-delay:0s;               /* default: 0 */
 animation-iteration-count:1;      /* default: 1*/
 animation-direction:alternate;    /* default: normal */
}

Status

Ondersteund door Opera (niet mini), IE, Safari, alle Webkit-browsers en Firefox.

Pas op: In Opera, IE en Firefox zonder prefix!

(Er zijn nog problemen met de specificatie, maar hopelijk zonder invloed of „normale” gevallen)

Oneindige animaties

span:nth-child(1){
 animation: cloud1 ease-in-out 10s infinite;
}
@keyframes cloud1 {
  from { left: 10px }
  50% { left: 90px }
  to { left: 10px }
}

Een stuiterende bal (1/5)

demo versie 1

@keyframes ball {
  0% { transform: translateY(-300px) scaleY(1.2); }
  33% { transform: translateY(0px) scaleY(1.2); }
  35% { transform: translateY(10px) scaleY(0.8); }
  66% { transform: translateY(-100px) scaleY(1.2); }
  100% { transform: translateY(0px); }
}

Een stuiterende bal (2/5)

demo versie 2

@keyframes ball {
  0% { transform: translateY(-300px) scaleY(1.2); }
  35% { transform: translateY(-300px) scaleY(1.2); }
  /* Zelfde positie als 0% */
  65% { transform: translateY(0px) scaleY(1.2); }
  67% { transform: translateY(10px) scaleY(0.8); }
  85% { transform: translateY(-100px) scaleY(1.2); }
  100% { transform: translateY(0px); }
}

Een stuiterende bal (3/5)

demo versie 3

@keyframes ball {
  0% { transform: translateY(-300px); }
  35% { transform: translateY(-300px);
  	animation-timing-function: ease-in; }
  65% { transform: translateY(0px);
  	animation-timing-function: ease-out; }
  85% { transform: translateY(-100px);
  	animation-timing-function: ease-in; }
  100% { transform: translateY(0px); }
}

Een stuiterende bal (4/5)

demo versie 4

Laat de bal ook zijwaarts bewegen, met een eigen functie voor de snelheid (m.b.v. cubic-bezier)

<div class="ball-arc">
   <div class="ball"></div>
</div>

.ball-arc {
 animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
}
@keyframes ball-x {
   0% { transform: translateX(-275px); }
   100% { transform: translateX(0px); }
}

Een stuiterende bal (5/5)

demo versie 5

.spin {animation: spin 2.5s}
.wobble {animation: wobble 2s}

@keyframes wobble {
  0%,24%,54%,74%,86%,96%,100% {transform: scaleX(1.0)}
  /* bal op de grond: */
  25%,55%,75% {transform: scaleX(1.3) scaleY(0.8) translateY(10px)}
  30%,60%,80% {transform: scaleX(0.8) scaleY(1.2)}
  75%,87% {transform: scaleX(1.2)}
  97% {transform: scaleX(1.1);}}
@keyframes spin {
    0% { transform: rotate(-180deg) }
    100% { transform: rotate(360deg) } }

Bron: smashing magazine

3D-kubus

#demo {
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused}
#demo:target {
  animation-play-state: running
}

Pauzeren is niet hetzelfde als stoppen

Meer info en demos on-line

Einde

→ Terug naar agenda