CSS3 animations

Animation using CSS3

CSS3 supports animations. Below I have few samples for CSS3 animations.

Sample 1: Color changing button

CSS:

.ccbtn { 
                  width: 100px; 
                  height: 30px; 
                  background-color: red; 
                  border-radius:20px; 
                  position: relative; 
                  animation-name: example; 
                  animation-duration: 10s; 
                  animation-iteration-count: infinite; 
}

@keyframes example { 
                  0% {background-color:blue; } 
                  25% {background-color:cyan; } 
                  50% {background-color:yellow; } 
                  75% {background-color:red; } 
                  100% {background-color:green; } 
}

<div class="ccbtn"></div>

Sample 2: Animation

CSS:

.ball {
            width: 30px;
            height: 30px;
            border-radius:20px;
            background-color: blue;
            position: relative;
            animation-name: example2;
            animation-duration: 5s;
            animation-iteration-count: 1;
 }

.rock{
             width:300px;
             height:100px;
             background-color:brown;
             border-radius: 0px 10px 0px 0px;
}

@keyframes example2 {
             0%   {left:0px; top:0px;}
             75%  {left:290px; top:0px;}    
             100% {left:300px; top:100px;}
}

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

<div class="rock"> </div>