CSS Animation


Prev Tutorial Next Tutorial

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>

Result

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.rolling-ball{
    width: 100px;
    height: 100px;
   -moz-border-radius: 100%;
   -webkit-border-radius: 100%;
    border-radius: 100%;
    background: red;
    position: relative;
    -webkit-animation: rolling-ball 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rolling-ball {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes rolling-ball {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="rolling-ball"></div>

</body>
</html>

Result

Code of First Animation

Example

<!DOCTYPE html>
<HTML>
 <HEAD>
 <style>
#animation-div
{
width:80px;
height:50px;
background:#B901A9;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
text-align:center;
animation:animation-div 5s 1;
-moz-animation:animation-div 5s 1;
-webkit-animation:animation-div 5s 1;
-o-animation:animation-div 5s 1;
border-radius:6px;
-webkit-border-radius:6px;
}

@keyframes animation-div
{
0%		{transform: rotate(0deg);left:0px;}
25%		{transform: rotate(20deg);left:0px;}
50%		{transform: rotate(0deg);left:500px;}
55%		{transform: rotate(0deg);left:500px;}
70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
100%	{transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animation-div
{
0%		{-webkit-transform: rotate(0deg);left:0px;}
25%		{-webkit-transform: rotate(20deg);left:0px;}
50%		{-webkit-transform: rotate(0deg);left:500px;}
55%		{-webkit-transform: rotate(360deg);left:500px;}
70%		{-webkit-transform: rotate(0deg);left:500px;background:#00E2FF;}
100%	{-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animation-div
{
0%   {-moz-transform: rotate(0deg);left:0px;}
25%  {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animation-div
{
0%   {transform: rotate(0deg);left:0px;}
25%  {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
</style>
</HEAD>

 <BODY>
  <div id="animation-div">CSS3<br><span style="font-size:15px;">Animation</span></div>

 </BODY>
</HTML>

Result

CSS3
Animation

Browser supported

Property
@keyframesYesYesYesYesYes
animationYesYesYesYesYes

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements