diedVIPs

html knowhow

@keyframes










@keyframes
Aufbau eines Keyframes @keyframes animationname {keyframes-selector {css-styles;}}
@keyframes Dieser Befehl gibt den Animationscode an. Er wird erstellt, indem schrittweise von einem Satz von CSS-Stilen zu einem anderen gewechselt wird.
Während der Animation können Sie den Satz von CSS-Stilen viele Male ändern.
0 % ist der Beginn der Animation, 100 % ist der Abschluss der Animation.
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
animationname Er ist erforderlich, denn er definiert den Namen der Animation.  
keyframes-selector Er ist erforderlich, denn er gibt den Prozentsatz der Animationsdauer an.  
style dazu Damit keyframe funktioniert, müssen Sie das im Style konfigurieren. div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}








Kontakt    Datenschutz   Impressum