allegro.webdesign

Mit CSS Animationen Bilder kontinuierlich drehen

Alle Artikel #CSS

Das Konzept der CSS-Animationen ist ziemlich einfach. Benenne die Animation, definiere die Bewegung in @keyframes und rufe diese Animation dann auf einem Element auf...

See the Pen css animation to rotate an image by cimwies (@cimwies) on CodePen.

Mit der Property "animation" lassen sich mittels CSS andere CSS Properties wie z.B. height, width, Color, background-color animieren. 

Was eine Anmiation ausführen soll wird über die @keyframes at-rule festgelegt und über die animation Property aufgerufen:

 

.rotate {
   animation: rotate 3s infinite linear;
}

@keyframes rotate {
   0% {transform:rotate(0deg);}
   100% {transform:rotate(359deg);}
}

 

.rotate = animation Propery

Im obigen Beispiel definiert die @keyframes at-rule, dass zu Beginn der Animation (= 0%) die CSS Property "transform:rotate(0deg)"  aufgerufen werden soll.

0% {transform:rotate(0deg);}

Am Ende der Animation ( = 100%) wird die CSS Propery "transform: rotate(359deg)" aufgerufen. 

100% {transform:rotate(359deg);}

Im Beispiel wurde die Shordhand animation Property angegeben.

animation: rotate 3s infinite linear

Durch die animation-timing-function: linear verläuft die Animation zu jedem Zeitpunkt gleichschnell ab. In diesem Fall dreht sich das Bild gleichmässig. Mit "ease" lassen sich sich Beschleunigungskurven für die Anmimation  einbauen.

Das Beispiel für drehende Bilder sieht dann so aus:

Back

Themen