CSS Animations laten je elementen op je webpagina vloeiend bewegen en veranderen zonder gebruik van JavaScript. Dit doe je door de eigenschap @keyframes te gebruiken, waarmee je de verschillende stappen van de animatie definieert. Vervolgens gebruik je de animation-eigenschap om de animatie aan een element toe te wijzen.
CSS Animations voorbeeld
Uitleg voorbeeld
Om dit vierkant te laten draaien hebben we de volgende code gebruikt. In de pagina hebben we een div geplaatst met de class rotating-square.
Vervolgens hebben we in de stylesheet de volgende CSS toegevoegd om het roteren via een CSS animatie mogelijk te maken.
.rotating-square {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px auto;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}