Swing Image Animation with CSS

This CSS animation can make your image a scenery effect with swing movement with the help of CSS and HTML coding.

Beautiful Image Swing Animation With CSS:

swing image

HTML Code:

<figure class="swing">
  <img src="https://www.provishal.com/wp-content/uploads/eating-panda.jpg" width="200" alt="eating panda">

CSS Code:

.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
/* nail */
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;

@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }

5/5 (5)

Leave a Comment