How can we do animations with only CSS

Download these examples

CSS allows animation of HTML elements without using JavaScript or Flash! Nice

All these properties @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count

animation-direction, animation-timing-function, animation-fill-mode, animation

Are supported in all these browsers:

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the

current style to the new style at certain times.

The following example binds the "example_1" animation to the div tag element.

The animation will last for 15 seconds, and it will gradually change the background-color of the div tag element

from "blue" to "yellow":

Example - 1 -

<html>
<head>
<style> 
 div{
  width: 500px;
  height: 50px;
  background-color: blue;
  animation-name: example_1;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  font-weight:bold;
  font-size:36px;
  color:white;
}
@keyframes example_1 {
  from {background-color: blue;}
  to {background-color: yellow;}
  from {background-color: yellow;}
  to {background-color: blue;}
  
}
</style>
</head>
<body>
<div><center> DZOSOFT </center></div>
</body>
</html>

Example - 2 -

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_2;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example_2 {
  0%   {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft.jpg'); left:400px; top:0px;}
  0%   {background-image:url('image/dzosoft.jpg'); left:400px; top:400px;}
  75%  {background-image:url('image/dzosoft.jpg'); left:0px; top:400px;}
  100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 3 -

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 5 times before it stops

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_3;
  animation-duration: 4s;
  animation-iteration-count: 5;
}

@keyframes example_3 {
  0%   {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;}
  50%  {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;}
  75%  {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;}
  100% {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 4 -

The animation-direction property specifies whether an animation should be played forwards,

backwards or in alternate cycles.

The following example will run the animation in reverse direction (backwards)

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_4;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example_4 {
  0%   {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;}
  50%  {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;}
  75%  {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;}
  100% {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 5 -

The animation-direction property specifies whether an animation should be played forwards,

backwards or in alternate cycles.

The following example uses the value "alternate" to make the animation run forwards first, then backwards

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default

reverse - The animation is played in reverse direction (backwards)

alternate - The animation is played forwards first, then backwards

alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_5;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example_5 {
  0%   {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;}
  50%  {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;}
  75%  {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;}
  100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 6 -

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:

 <!--
 <!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_6;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example_6 {
  0%   {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_1.jpg'); left:500px; top:0px;}
  50%  {background-image:url('image/dzosoft_2.jpg'); left:500px; top:100px;}
  75%  {background-image:url('image/dzosoft_3.jpg'); left:0px; top:100px;}
  100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 7 -

The animation-timing-function property specifies the speed curve of the animation.

It can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)

linear - Specifies an animation with the same speed from start to end

ease-in - Specifies an animation with a slow start

ease-out - Specifies an animation with a slow end

ease-in-out - Specifies an animation with a slow start and end

cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-color: white;
  font-weight: bold;
  position: relative;
  animation: move_dzo 5s infinite;
}

 .div_1{
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  animation-timing-function: linear;
}
 .div_2{
  background-image:url('image/dzosoft_1.jpg'); 
  background-repeat: no-repeat;
  animation-timing-function: ease;
}
 .div_3{
  background-image:url('image/dzosoft_2.jpg'); 
  background-repeat: no-repeat;
  animation-timing-function: ease-in;
}
 .div_4{
  background-image:url('image/dzosoft_3.jpg'); 
  background-repeat: no-repeat;
  animation-timing-function: ease-out;
}
 .div_5{
  background-image:url('image/dzosoft_4.jpg'); 
  background-repeat: no-repeat;
  animation-timing-function: ease-in-out;
}

@keyframes move_dzo {
  from {left: 0px;}
  to {left: 500px;}
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>
<div class="div_4"></div>
<div class="div_5"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-color: white;
  font-weight: bold;
  position: relative;<font color="#33FFFF">
  animation: move_dzo 5s infinite;</font>
}

.div_1{
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;<font color="#33FFFF">
  animation-timing-function: linear;</font>
}
 .div_2{
  background-image:url('image/dzosoft_1.jpg'); 
  background-repeat: no-repeat;<font color="#33FFFF">
  animation-timing-function: ease;</font>
}
 .div_3{
  background-image:url('image/dzosoft_2.jpg'); 
  background-repeat: no-repeat;<font color="#33FFFF">
  animation-timing-function: ease-in;</font>
}
 .div_4{
  background-image:url('image/dzosoft_3.jpg'); 
  background-repeat: no-repeat;<font color="#33FFFF">
  animation-timing-function: ease-out;</font>
}
 .div_5{
  background-image:url('image/dzosoft_4.jpg'); 
  background-repeat: no-repeat;<font color="#33FFFF">
  animation-timing-function: ease-in-out;</font>
}

@keyframes move_dzo {
  from {left: 0px;}
  to {left: 500px;}
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>
<div class="div_4"></div>
<div class="div_5"></div>
</body>
</html>

Example - 8 -

The animation-fill-mode property specifies a style for the target element when the animation is not playing

(before it starts, after it ends, or both).

The following example lets the <div> element retain the style values from the last keyframe

when the animation ends:

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft_1.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_8;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example_8 {
  from {top: 0px;}
  to {top: 400px; background-image:url('image/dzosoft_1.jpg');}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 9 -

The following example lets the

element get the style values set by the first keyframe before the animation starts

(during the animation-delay period):

Let the div element get the style values set by the first keyframe before the animation starts

(during the animation-delay period)

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft_2.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_9;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example_9 {
  from {top: 0px; background-image:url('image/dzosoft_2.jpg');}
  to {top: 200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 10 -

This example uses six of the animation properties

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft_3.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation-name: example_10;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example_10 {
  0%   {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;}
  50%  {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;}
  75%  {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;}
  100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Example - 11 -

This example uses the shorthand animation property:

<!DOCTYPE html>
<html>
<head>
<style> 
 div{
  width: 50px;
  height: 50px;
  background-image:url('image/dzosoft.jpg'); 
  background-repeat: no-repeat;
  position: relative;
  animation: example_11 5s linear 2s infinite alternate;
}

@keyframes example_11 {
  0%   {background-image:url('image/dzosoft.jpg');   left:0px; top:0px;}
  25%  {background-image:url('image/dzosoft_1.jpg'); left:300px; top:0px;}
  50%  {background-image:url('image/dzosoft_2.jpg'); left:300px; top:300px;}
  75%  {background-image:url('image/dzosoft_3.jpg'); left:0px; top:300px;}
  100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>