I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: i.e. CSS scale and CSS3 rotation.
Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css.
Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.
The HTML
<div id="colorWheel">
<span class="color01"></span>
<span class="color02"></span>
<span class="color03"></span>
<span class="color04"></span>
<span class="color05"></span>
<span class="color06"></span>
<span class="color07"></span>
<span class="color08"></span>
<span class="color09"></span>
<span class="color10"></span>
</div>
The CSS
Now, We will use some CSS Technique using border-color tricks and CSS3 rotation. I have created this color cycle without using any image. I have done a cool rotating wheel animation using @keyframes animation.
#colorWheel {
height: 100px;
width: 100px;
margin: 40px auto ;
position: absolute; left:10%;
-webkit-transform-origin: 50px 150px;
-moz-transform-origin: 50px 150px;
-ms-transform-origin: 50px 150px;
-o-transform-origin: 50px 150px;
transform-origin: 50px 150px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
animation: wheel 10s ease-in-out infinite alternate;
-moz-animation: wheel 10s ease-in-out infinite alternate;
-webkit-animation: wheel 10s ease-in-out infinite alternate;
-ms-animation: wheel 10s ease-in-out infinite alternate;
}
@keyframes wheel{
0%{
opacity:1;
left:-10%;
transform:scale(.6) rotate(0deg);
}
50%{
opacity:.7}
100%{
left: 90%;
opacity:1;
transform:scale(1) rotate(2160deg);
}
}
@-webkit-keyframes wheel{
0%{
opacity:1;
left:-10%;
-webkit-transform:scale(.6) rotate(0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-webkit-transform:scale(1) rotate(2160deg);
}
}
@-moz-keyframes wheel{
0%{
opacity:1;
left:-10%;
-moz-transform:scale(.6) rotate(0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-moz-transform:scale(1) rotate(2160deg);
}
}
@-ms-keyframes wheel{
0%{
opacity:1;
left:-10%;
-ms-transform:scale(.6) rotate(0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-ms-transform:scale(1) rotate(2160deg);
}
}
#colorWheel:hover {}
#colorWheel span {
position: absolute;
-webkit-transform-origin: 50% 50%;
border-style: solid;
border-width: 150px 50px;
box-sizing: border-box;
}
#colorWheel span.color01 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
content: "";
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: -30px;
left: -130px;
border-radius: 100%;
border: 30px solid #ffffff;
z-index: 100;
box-shadow:0px 0px 2px 12px rgba(180,180,180,.5)
}
#colorWheel:after {
content: "";
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 100px;
left: 0px;
border-radius: 100%;
box-shadow:0px 0px 2px 12px rgba(250,250,250,.5);
background: #444 url(Dhiraj.png); background-size:contain
}
Your turn
I had already posted some articles of css3 @keyframes animation examples. Please check some of these beautiful animation with demo below:
- CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year Greetings
- Rotating Words With CSS Animations – CSS3 Keyframes Animation Example
- Animated 3D Bouncing Ball with CSS3, Html5
- Creating CSS Starbursts Design with CSS3 Transform
- Animated Notification bubble icon with CSS3 keyframe animation
- How to create a simple CSS3 loading animation
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 