16 September 2017

CSS Animation

CSS Animation

 


 


CSS Animation is used to create animation on the webpage. CSS3 animations can replace the animations created by Flash and JavaScript on web pages. CSS Animation is available in CSS3.
CSS3
Animation

CSS3 @keyframes Rule

In CSS animation is created in the @keyframe rule. It is used to change animation from the current style to the new style.

CSS3 Animation

When an animation is created in the @keyframe rule, you must need to bind it with selector, otherwise the animation will have no effect.
The animation could be bind with selector (Html element) by specifying at least below two properties;
  • the name of the animation
  • the duration of the animation

CSS animation properties

PropertyDescription
@keyframesIt is used to specify the animation.
animationThis is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
animation-delayIt specifies when the animation will start.
animation-directionIt specifies if or not the animation should play in reserve on alternate cycle.
animation-durationIt specifies the time duration taken by the animation to complete one cycle.
animation-fill-modeit specifies the static style of the element. (when the animation is not playing)
animation-iteration-count It specifies the number of times the animation should be played.
animation-play-stateIt specifies if the animation is running or paused.
animation-nameIt specifies the name of @keyframes animation.
animation-timing-functionIt specifies the speed curve of the animation.

Example

<html>
<head>
<style>
.myanimation {
 height:100px;
 width:100px;
    background: red;
    animation: myanimation 5s;
 -webkit-animation: myanimation 5s; /* Chrome, Safari, Opera */
  
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myanimation {
    from {background: red;}
    to {background: yellow;}
}

@keyframes myanimation {
    from {background: red;}
    to {background: yellow;}
}
</style>
<body>
<div class="myanimation"></div>
</body>
</html>

 

Start typing and press Enter to search