CSS3 Animations, TutorialsPoint, CSS3 Animations Tutorial

CSS3 Anomations

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 :

CSS3 Tutorial