Reclaim the CSS Animation

singleprofessionalbox
It’s been a bit quiet around here recently. Between flying relatively solo on Reclaim Hosting support last week and fitting in some vacation time as well I’ve been fairly busy. That said, I’ve been meaning to play around with CSS animation thanks to Tom Woodward’s post last month featuring beer bubbles. And after talking with Bryan Mathers about more seamless animation of the artwork illustrating the shared hosting packages, playing with the CSS sample Tom shared was high on my to-do list. Bryan Mathers also did a really cool record animation for spinning up apps that I wanted to incorporate on the site somehow.

writing on the disc med-1

But time and C64 overtook me, and my grand plans remained dreams….until today. While working on something far more clerical this morning the great John Johnston shot me this via direct message:

xgwhtw2Yoa

How about that, reading my mind! Or at least Tom Woodward’s blog. The Reclaim Hosting logo  animated as a revolving record whenever you mouse over it—I’m sold! Let’s see that again and again and again…LByMbD2uFy

Here is the CSS code John sent my way soon after:

@-webkit-keyframes rotating /* Safari and Chrome */ {
      from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes rotating {
      from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .logo img:hover {
      -webkit-animation: rotating steps(13,end)  linear infinite;
      -moz-animation: rotating 1s steps(13,end)  infinite;
      -ms-animation: rotating 1s steps(13,end)  infinite;
      -o-animation: rotating 1s steps(13,end)  infinite;
      animation: rotating 1s steps(13,end)  infinite;
    }

All I did was drop it into the stylesheet for the child theme we’re using for Reclaim Hosting’s site and it worked seamlessly. So, now it is time to take what I’ve learned here and animated the package icons for the shared hosting. You rule John Johnston!

This entry was posted in design, reclaim and tagged , , , , , . Bookmark the permalink.

2 Responses to Reclaim the CSS Animation

  1. John says:

    Hi Jim,
    Thanks, not so much rule as use the million monkeys technique, keep typing until it works.
    I started playing with animating css a while back, you might recall staring in:
    http://johnjohnston.info/106/not-an-animated-gif/

    😉

    I am not sure if all the vendor prefixes I sent are needed, I’ve been to lazy to google or test.

    • Reverend says:

      You have been such a machine of awesome for the last 4 years it’s been hard to keep up. Catching up with all you’ve done is one of my goals this summer. Thanks for continually inspiring me!

Leave a Reply to Reverend Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.