CSS Animation Featured Image

CSS Animation – Image Rotation Demo

Just messin’ with CSS rotation/animation effects etc. — Yeah, OK kinda pointless with little or no value in terms of practical application… HOWEVER, staring at this thing for any length of time may (in some cases) induce a cheap high in the form of a pleasantly mild psychedelic flashback experience…

animated element
animated element
animated element
animated element
placeHolder element

Images Used

.png and .webP format images with transparent backgrounds.

animated element

overlay image w/ transparent BG

placeHolder element

transparent placeholder

animated element

bg image A w/ transparent BG

animated element

bg image B w/ transparent BG

The HTML

Copy & paste the following into your post’s edit window:

<div id="animElemOuter">

    <div id="overlayElement">
        <picture>
            <source type="image/webp" srcset="https://www.mywebsite.com/wp-content/uploads/images/mustObey.webp">
            <source type="image/png" srcset="https://www.mywebsite.com/wp-content/uploads/images/mustObey.png">
            <img src="https://www.mywebsite.com/wp-content/uploads/images/mustObey.png">
        </picture>
    </div>

    <div id="animElemBoxA">
        <picture>
            <source type="image/webp" srcset="https://www.mywebsite.com/wp-content/uploads/images/spinFLA3.webp">
            <source type="image/png" srcset="https://www.mywebsite.com/wp-content/uploads/images/spinFLA3.png">
            <img src="https://www.mywebsite.com/wp-content/uploads/images/spinFLA3.png" alt="animated element">
        </picture>
    </div>

    <div id="animElemBoxB">
        <picture>
            <source type="image/webp" srcset="https://www.mywebsite.com/wp-content/uploads/images/spinFLA2.webp">
            <source type="image/png" srcset="https://www.mywebsite.com/wp-content/uploads/images/spinFLA2.png">
            <img src="https://www.mywebsite.com/wp-content/uploads/images/spinFLA2.png" alt="animated element">
        </picture>
    </div>

    <picture>
        <source type="image/webp" srcset="https://www.mywebsite.com/wp-content/uploads/images/placeHolderM.webp">
        <source type="image/png" srcset="https://www.mywebsite.com/wp-content/uploads/images/placeHolderM.png">
        <img src="https://www.mywebsite.com/wp-content/uploads/images/placeHolderM.png" style="width: 100%;" alt="placeHolder element">
    </picture>

</div>

The CSS

Copy & paste the following into your theme’s CSS editor (Appearance > Customize > Additional CSS):

#animElemOuter {
    width: 95%;
    position: relative;
    overflow: hidden;    
    margin: 20px auto;
    background: #ff7e7e;
}

#overlayElement {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 10;
    opacity: .8;
}

#animElemBoxA {
    position: absolute;
    top: -57%;
    left: -16%;
    width: 130%;
    margin: 0px auto;
    animation: rotation 5000ms infinite linear;
    animation-name: AnimElem;
}

#animElemBoxB {
    position: absolute;
    top: -57%;
    left: -16%;
    width: 130%;
    margin: 0px auto;
    animation: rotation 4000ms infinite linear;
    animation-name: AnimElem;
}

#animElemBoxA img, #animElemBoxB img {
    width: 100%;
}

#animElemBoxA img {
    opacity: 1;
}

#animElemBoxB img {
    opacity: .5;
}

@keyframes AnimElem {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  } 
}

*Some additional jQuery used for the ‘Run Animation’ & ‘Stop Animation’ buttons, not documented here.

Leave a Reply

Your email address will not be published. Required fields are marked *