CSS3 Animationen

Schlüsselbildanimationen / Keyframe animations

Einfacher Farbwechsel eines Blocks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div#box {
  width:  100px;
  height: 100px;
  border: 1px solid black;        
}
 
div#box:hover {
  animation: changeColor 5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
 
@keyframes changeColor {
   0% { background-color: red; } 
  25% { background-color: green; }
  50% { background-color: red; }
  75% { background-color: green; }
 100% { background-color: yellow; }
}

Verwendung von Konstanten:

1
2
3
4
5
6
7

@keyframes changeColor {
 from { background-color: red; } 
  25% { background-color: green; }
  50% { background-color: red; }
  75% { background-color: green; }
   to { background-color: yellow; }
}

Zusammenfassung von Schlüsselbildern:

1
2
3
4
5

@keyframes changeColor {
 from, 50% { background-color: red; } 
  25%, 75% { background-color: green; }
        to { background-color: yellow; }
}

Beispiel einer Animation mit Event-Listener:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<head>
  ...
  <style>
    div#box {
      width: 100px;
      height: 100px;
      border: 1px solid black;        
    }
 
    .black { animation: toBlack 2s forwards; }
    .white { animation: toWhite 1s forwards; }
 
    @keyframes toBlack {
      from { background-color: white; } 
        to { background-color: black; } 
    }
 
    @keyframes toWhite {
      from { background-color: black; } 
        to { background-color: white; } 
    }      
  </style>
</head>
<body>
  <div id="box" class="black"></div>
  <script>
    var box = document.getElementById('box');
    box.addEventListener('animationend', function(event){
      box.className = 'white';
    });
  </script>
</body>

Programmierung einer CSS-Animation mit JavaScript:

// Animation
var animation = document.createTextNode('@keyframes rotate {from { transform: rotate(0deg); } to { transform: rotate(360deg); }}');
var webkitAnimation = document.createTextNode('@-webkit-keyframes rotate {from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}');
var style = document.createElement('style');
style.appendChild(animation);
style.appendChild(webkitAnimation);
document.getElementsByTagName('head')[0].appendChild(style);
// Bild
var card = document.createElement('div');
card.style.backgroundImage = "url('images/card.png')";
card.style.width = '114px';
card.style.height = '158px';
card.style.display = 'inline-block';
card.style.animation = 'rotate 6s linear infinite';
card.style.WebkitAnimation = 'rotate 6s linear infinite';
// Quadrat
var square = document.createElement('div');
square.style.width = '200px';
square.style.height = '200px';
square.style.display = 'table-cell';
square.style.verticalAlign = 'middle';
square.style.textAlign = 'center';
square.appendChild(card);
document.body.appendChild(square);

Programmierung einer SVG-Animation mit JavaScript:

// Animation
var animateTransform = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
animateTransform.setAttribute('attributeName', 'transform');
animateTransform.setAttribute('type', 'rotate');
animateTransform.setAttribute('repeatCount', 'indefinite');
animateTransform.setAttribute('begin', '0');
animateTransform.setAttribute('dur', '6');
animateTransform.setAttribute('from', '0 100 100');
animateTransform.setAttribute('to', '360 100 100');
// Bild
var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'images/card.png');
image.setAttribute('width', '114');
image.setAttribute('height', '158');
image.setAttribute('x', '43');
image.setAttribute('y', '21');
image.appendChild(animateTransform);
// Quadrat
var square = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
square.setAttribute('width', '200');
square.setAttribute('height', '200');
square.appendChild(image);
document.body.appendChild(square);

2 Gedanken zu „CSS3 Animationen“

  1. Pingback: Stabile und komfortable Links mit WordPress einfügen › Der Blog von Benny Neugebauer

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.