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>

Rounded Corner Buttons using CSS3

Rounded Corner Buttons using CSS3

There are loads of useful features available in CSS3. Curved edge button is one of the valuable features. Using border-radius attribute we can style the buttons with curved edges. Previously images are used for curved edge button but with new CSS3 we can easily create the curvy edges.

Sample:

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 20px;

                     background-color:#42b0f4;

                  }

We can create different shapes based on our requirements. We can define the border-radius for the four edges. If we are defining four values then, the top left edge is denoted with the first value and then clockwise edges for the remaining.

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 0px;

                     background-color:#42b0f4;

                  }

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 20px 5px 5px;

                     background-color:#42b0f4;

                  }