This page is all about using css to do animation. In the head of our html we have a style section. We create an '@keyframes' section which changes the background-color property. We use this in the definition of a class called 'box'. This is what it looks like:
@keyframes colour-change {
from {background-color: red;}
to {background-color: yellow;}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: 4s infinite alternate colour-change;
}
Then we create a 'div' element with class="box".
<div class="box"></div>
The result is a box which changes from red to yellow and back again, over and over again, forever!
With some extra instructions in our keyframes we can make something swing from side to side while it is changing colour and the background colour is also changing. Let's make the word 'swing' do it!
swing