Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 Animation

An Animation is such a property of CSS3, which is used to animate the object, without using flash or any other animation application. With this feature of CSS3 You can change the object into one style to another style in animated way.

The all measure browsers support Animation feature except of Internet Explorer.

It gradually change an object style to another style, The complete Animation depend upon the declaring the Keyframes with the css3.

TutOn

<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
</head>
<style>
#animated_div
{
text-align:center;
width:60px;
height:40px;
background:#6699FF;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s infinite;
-moz-animation:animated_div 5s infinite;
-webkit-animation:animated_div 5s infinite;
border-radius:5px;
-webkit-border-radius:5px;
}
@keyframes animated_div
{
0% {left:0px;}
20% {left:50px; background-color: green;}
40% {left:140px; background-color: red;}
60% {left:280px; background-color: yellow;}
80% {left:425px; background-color: blue;}
100% {left:0px; background-color: pink;}
}
@-webkit-keyframes animated_div
{
0% {left:0px;}
20% {left:50px; background-color: green; margin-top: 50px;}
40% {left:140px; background-color: red;margin-top: 0px;}
60% {left:280px; background-color: yellow;margin-top: 50px;}
80% {left:425px; background-color: blue;margin-top: 0px;}
100% {left:0px; background-color: pink;}
}
</style>
<body>
<div id="animated_div">
TuteOn
<span style="font-size:10px;"></span></div></body></html>
What Are CSS3 Animations?

An animation lets an element gradually change from one style to another.

You can change as many properties you want, as many times you want.

You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).

0% represents the start of the animation, 100% is when the animation is complete.

CSS3 @keyframes Rule

The @keyframes rule is where the animation is created.

Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

CSS3 Animation Properties
Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for setting all the animation properties, except the animation-play-state and the animation-fill-mode property 3
animation-delay Specifies when the animation will start 3
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles 3
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle 3
animation-fill-mode Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay") 3
animation-iteration-count Specifies the number of times an animation should be played 3
animation-name Specifies the name of the @keyframes animation 3
animation-play-state Specifies whether the animation is running or paused 3
animation-timing-function Specifies the speed curve of the animation 3


Related Videos