CSS3 Simple Animation Tutorial

Datetime:2016-08-23 03:06:11          Topic: CSS3           Share

CSS3 animations allow elements to change their CSS properties within a set time period.

Any element that requires animating must have a property called animation

.box {
  animation: ;    
}

As well as @keyframes to specify the starting and ending points of an animation.

The following animation has three values:

animation-nameis the name of the keyframes in this case myKeyframes

animation-durationis the time it takes for the animation to complete in seconds

animation-iteration-countis how many times the animation loops. Can be <number> or infinite

@keyframes myKeyframes {
  0% {
    background: red;    
  }  
  100% {
    background: cyan;    
  }
}

.box {
  /*name, duration, iteration-count*/
  animation: myKeyframes 5s infinite;    
}

To make the last animation look smoother we can add animation-direction to reverse the direction of the animation on completion.

.box {
  animation: myKeyframes 5s infinite alternate;    
}

You can also set the animation-delay to delay the start of the animation

.box {
  animation: myKeyframes 5s infinite alternate 5s;    
}

Lastly you have animation-timing-function that adjusts the speed of change between keyframes

.box {
  animation: myKeyframes 1s infinite alternate ease-in-out;
}

For more in depth into CSS3 Animations I recommend reading Mozilla’s Using CSS animations .

Thanks for reading!





About List