Create Image animation Like Pendulum using CSS in HTML
Friends, today I am posting HTML and CSS related tutorial. In this tutorial, I will show you a beautiful animation using HTML and CSS. You have seen the pendulum, here I will show you a pendulum animation on the image.
Every web designer wants to add new design in their work and they want to create something new every day. So, this tutorial helps them to create a new animation in their web design using simple CSS in an HTML web page.
Let’s follow the example Codes:
HTML CODE
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="main.css"> <style type="text/css"> .imag_class{ margin: -50px 0; overflow: hidden; animation: animationFrames ease-in-out 6s; animation-iteration-count: infinite; transform-origin: 50% 0%; -webkit-animation: animationFrames ease-in-out 6s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 0%; } </style> </head> <body> <h3>Create Image animation Like Pendulum using CSS in HTML</h3> <div style="text-align: center;"> <img src="images/followme.jpg" class="imag_class" width="400" height="300"> </div> </body> </html>
main.css Code
.tg-noticeboard{ margin: -50px 0; overflow: hidden; animation: animationFrames ease-in-out 6s; animation-iteration-count: infinite; transform-origin: 50% 0%; -webkit-animation: animationFrames ease-in-out 6s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 0%; -moz-animation: animationFrames ease-in-out 6s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 0%; -o-animation: animationFrames ease-in-out 6s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 0%; -ms-animation: animationFrames ease-in-out 6s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 0%; } @keyframes animationFrames{ 0% {transform: rotate(15deg);} 50% {transform: rotate(-15deg);} 100% {transform: rotate(15deg);} } @-moz-keyframes animationFrames{ 0% {-moz-transform: rotate(15deg);} 50% {-moz-transform: rotate(-15deg);} 100% {-moz-transform: rotate(15deg);} } @-webkit-keyframes animationFrames { 0% {-webkit-transform: rotate(15deg);} 50% {-webkit-transform: rotate(-15deg);} 100% {-webkit-transform: rotate(15deg);} } @-o-keyframes animationFrames { 0% {-o-transform: rotate(15deg);} 50% {-o-transform: rotate(-15deg);} 100% {-o-transform: rotate(15deg);} } @-ms-keyframes animationFrames { 0% {-ms-transform: rotate(15deg);} 50% {-ms-transform: rotate(-15deg);} 100% {-ms-transform: rotate(15deg);} }
Related posts