- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Swing Animation Effect with CSS
The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.
Example
<html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } </style> </head> <body> <div id = "animated-example" class = "animated swing"></div> <button onclick = "myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
- Related Articles
- Wiggle Animation Effect with CSS
- Bounce Animation Effect with CSS
- Flash Animation Effect with CSS
- Flip Animation Effect with CSS
- Hinge Animation Effect with CSS
- Pulse Animation Effect with CSS
- Wobble Animation Effect with CSS
- Shake Animation Effect with CSS
- Tada Animation Effect with CSS
- Fade In Animation Effect with CSS
- Fade Out Animation Effect with CSS
- Bounce In Animation Effect with CSS
- Bounce Out Animation Effect with CSS
- Bounce Up Animation Effect with CSS
- Roll In Animation Effect with CSS

Advertisements