CSS3 Animations
The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. Creating CSS animations is a two step process, as shown in the example below:

The first step of building a CSS animation is to defining individual keyframes and naming an animation with a keyframes declaration.

The second step is referencing the keyframes by name using the animation-name property as well as adding animation-duration and other optional animation properties to control the animation's behavior.
Property Description
animation Animation properties in single declaration.
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delay Specifies when the animation will start.
animation-iteration-count Specifies the number of times an animation cycle should be played before stopping.
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-play-state Specifies whether the animation is running or paused.
@keyframes Specifies the values for the animating properties at various points during the animation.
@keyframes Rule
<!DOCTYPE html>
<html>
<head>
<title>@keyframes Rule</title>

<style type="text/css"> 
.simpla_animation{ 
width: 100px;  
height: 100px; 
border-radius:100px;  
background-color: red;  
-webkit-animation-name: example;  
-webkit-animation-duration: 4s; 
animation-name: example; 
animation-duration: 4s; 
}
 
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
</style>

</head>
<body>

<h4>@keyframes Rule</h4>
 
<div class="simpla_animation"></div>
 
</body>
</html>
Output :

@keyframes Rule


Example Animation :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infinite Translate Animation</title>
 
<style type="text/css">
 
.box_animation {
margin: 50px;
width:200px;
height:150px;
background:url(images/m_b_2.jpg) no-repeat;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
/* Standard syntax */
animation: repeatit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
 
</style>
</head>

<body>
 
<div class="box_animation"></div>
 
</body>
</html> 
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.