Html Css Animation Examples

HTML CSS Animation Examaples with full Html Css codings

Start Html Css animation with a simple examples, as you can see below,

1. Basic Animation Example

.box-1{
width:50px;
height:50px;
background:orange;
position:relative;

-webkit-animation: skcals 5s linear infinite;

}

@-webkit-keyframes skcals{

0% {left:0px;}
 100% {left:230px; } 


} 

2. Colors Animation

 .animation-2{

width:40px;
height:40px;
background:gold;

 position:relative;

-webkit-animation: skcal 5s linear infinite;

}

@-webkit-keyframes skcal{

0% {left:0px; background:blue;}
 20% {left:40px; background:red;} 
 40% {left:80px; background:green;} 
 60% {left:120px; background:purple;} 
 80% {left:160px; background:lime;} 
100% {left:230px; background:orange; } 


} 
 
 

3. Progress Bar Animation

<h2>3. Progress Bar Animation</h2>

<div class="css-animation-3"><div class="progress-bar"></div></div>
<style>


.css-animation-3{
width:290px;
height:25px;
background:grey;
box-shadow:inset 1px 1px 1px black;
margin-left:10px;
border-radius:5px;
border:1px solid black;

}


.progress-bar{
width:40px;
height:25px;
background:lime;
border-radius:5px;

 position:relative;

-webkit-animation: sk 10s linear infinite;

}

@-webkit-keyframes sk{

0% {width:40px;}
50%{width:290px;} 
 100% {width:290px; } 



}



</style>