"Rocking Images with CSS Animations"
Bootstrap 4.1.1 Snippet by Umerfarooq

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class='event' id='event'> <div class='cell well'> <div class='event-content'> <img src='https://image.freepik.com/free-icon/restaurant-cutlery-circular-symbol-of-a-spoon-and-a-fork-in-a-circle_318-61086.png' alt='SweetLandia' id='sweetlandia' width='200' /> </div> </div> </section>
@keyframes swing { 0%, 100% { transform: rotate(-30deg); } 20% {transform:scale(.95);} 50% { transform: rotate(30deg); } 80% {transform:scale(.95);} } #sweetlandia { animation: swing 2s infinite ease-in-out; } .event{ margin:50px auto; text-align:center; }

Related: See More


Questions / Comments: