This Post Explain how to create Flip Animation effect using CSS3. Here we are using CSS keyframe attribute to perform flip animation effect horizontally and vertically to small square div box. All the animation effect is controlled by Keyframes Rule and it provides very smooth animation effect.
Keyframe Animation :
Here we are using below CSS Style to perform flip animation effect horizontally and vertically to small square div box.
Lets see the complete source code to perform Flip Animation effect to div.
Output :
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Flip%20Animation%20effect%20using%20CSS3
You can use this animation effect during the ajax calls.
This is all about CSS3 flip animation effect. in case you have any queries, please do comment in below comment box.
Keyframe Animation :
Here we are using below CSS Style to perform flip animation effect horizontally and vertically to small square div box.
@keyframes rotate-div { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); background-color: #ec407a; } }
Lets see the complete source code to perform Flip Animation effect to div.
<html> <head> <style> .spinner { width: 100px; height: 100px; background-color: #42a5f5; margin: 100px auto; -webkit-animation: rotate-div 1.2s infinite ease-in-out; animation: rotate-div 1.2s infinite ease-in-out; } @keyframes rotate-div { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); background-color: #ec407a; } } </style> </head> <body> <div class="spinner"></div> </body> </html>
Output :
https://github.com/skptricks/php-Tutorials/tree/master/Flip%20Animation%20effect%20using%20CSS3
You can use this animation effect during the ajax calls.
This is all about CSS3 flip animation effect. in case you have any queries, please do comment in below comment box.
No comments:
Post a Comment