CSS Animations

Example of CSS animation using background-color

This is an example of using CSS animations where the Element background colour is switching between red and yellow.

Animation of CSS animation working.

Code below is setting up the animation inside an element.

div {
    animation-name: example;
    animation-duration: 4s;
  }

The setup of the animation keyframes.

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Example of animation using left.

Simple example using CSS animation and left. the keyframes show from left at 0 position and moving to left at 100px.

div {
    animation-name: example;
    animation-duration: 4s;
  }
@keyframes example {
  from {left:0;}
  to {left:100px;}
}

Recent Posts