Sunday, November 30, 2014

Glowing Circle effect CSS3 animation by keyframing

This is a simple tutorial on css3 animation.In this tutorial we are going to make a circular glow effect using css3.
HTML
<div class="ringbox">
 <div class="green gr1"></div>
<img src="images/background.png">
 </div>
CSS
.ringbox {
width: 637px;
margin: auto;
position: relative;
}
 
.green {
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
-webkit-animation: ring 1.1s ease-out infinite;
-moz-animation: ring 1.1s ease-out infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #009d7b;
}
 
.gr1 {
top: 48px;
left: 208px;
}
Ainimation CSS
@-webkit-keyframes ring{
 
0%{-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
 
50%{opacity: 1.0;}
 
100%{-webkit-transform: scale(1.2, 1.2);opacity: 0.0;}
 
}
 
@-moz-keyframes ring{
 
0%{-moz-transform: scale(0.1, 0.1);opacity: 0.0;}
 
50%{opacity: 1.0;}
 
100%{-moz-transform: scale(1.2, 1.2);opacity: 0.0;}
 
}
 
@-o-keyframes ring{
 
0%{-o-transform: scale(0.1, 0.1);opacity: 0.0;}
 
50%{opacity: 1.0;}
 
100%{-o-transform: scale(1.2, 1.2);opacity: 0.0;}
 
}

No comments:

Post a Comment