Monday, June 18, 2018

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>

No comments:

Post a Comment

Content Sharing with External Users using IBM Content Navigator

Accessing the content from FileNet Platform by external user feature is supported in the latest version of FileNet CPE. Content will be sh...