CSS Animation

Advertisements

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 Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements