CodesJava

Easy learning with example program codes

CSS Animation

To create an animation on a webpage, we can either use CSS animation, Flash or JavaScript, each having their own benefits and limitations.

CSS3 @keyframes Rule:

To control the intermediate steps in a CSS animation sequence, it is created in the @keyframe rule.

Effect of animation:

To create an element that can change gradually from one style to another, the animation is required. There is no limit on the animation properties to add. When the changes are defined in percentage, then 0% represents the beginning of the animation and 100% represents the end of the animation.

Working of the CSS animation:

For the animation created in the @keyframe rule, the animation will not work till it is bound with the selector. One can achieve this by specifying at least the below properties:

  • Name of the animation
  • Duration of the animation

CSS Animation Properties:

PropertyUses
@keyframesTo specify the animation.
animationTo set each property, other than the animation-play-state and the animation-fill- mode property.
animation-delayTo determine when the animation will start.
animation-directionTo determine whether or not the animation should play in reserve on alternate cycle.
animation-durationTo indicate the time duration taken by the animation to complete one cycle.
animation-fill-modeTo define the static style of the element when the animation does not play.
animation-iteration-countTo define the number of times the animation will play.
animation-play-stateTo determine whether the animation is running or paused.
animation-nameTo define the name of @keyframes animation.
animation-timing-functionTo define the speed curve of the animation.

Example: Changing background-color:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 200px;
  height: 100px;
  background-color: crimson;
  -webkit-animation-name: changing; 
  -webkit-animation-duration: 10s;
  animation-name: changing;
  animation-duration: 10s;
}
 
@-webkit-keyframes changing {
  from {background-color: crimson;}
  to {background-color: purple;}
}
 
@keyframes changing {
  from {background-color: crimson;}
  to {background-color: purple;}
}
</style>
</head>
<body>
<h2>I change my color.</h2>
<div></div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, the background color of the rectangle changes from crimson to purple.

Example: Moving Rectangle:

<!DOCTYPE html>  
<html>  
<head>  
<style>   
div {  
    width: 50px;  
    height: 100px;  
    background: crimson;  
    position: relative;  
    -webkit-animation: moving 10s;   
    animation: moving 10s;  
}  
 
@-webkit-keyframes moving {  
    0%   {background:crimson; left:0px; top:0px;}  
    25%  {background:yellow; left:400px; top:0px;}  
    50%  {background:blue; left:300px; top:400px;}  
    75%  {background:green; left:0px; top:300px;}  
    100% {background:crimson; left:0px; top:0px;}  
}  
 
@keyframes moving {  
    0%   {background:crimson; left:0px; top:0px;}  
    25%  {background:yellow; left:400px; top:0px;}  
    50%  {background:blue; left:400px; top:300px;}  
    75%  {background:green; left:0px; top:300px;}  
    100% {background:crimson; left:0px; top:0px;}  
}  
</style>  
</head>  
<body>   
<div></div>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying animation with a percentage value. Here, the rectangle is moving from one position to another and is also changing color while moving.

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status