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.

The COLOR MY INKS Coloring Book

Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book Color My Inks Coloring Book