Google Chrome Beta and CSS3 Animations


Google Chrome Beta

With the new Chrome browser in beta and set to release a ‘feature’ which will automatically pause “less important” Flash content, this appears to be the start inevitable continuation of a long and slow death for Flash advertising. Google has spent the past 10 years phasing out Flash video on YouTube, and achieved this in January this year.

This is particularly significant seeing as Chrome has 44.5% market share at the moment, but this feature has been available in Safari for some time. Google’s intent is to boost computer performance and battery life (as was Safari’s), and they’re working together with Adobe in this… interestingly, given some tension between Apple and Adobe in this kind of thing before.

HTML5 Ads

With that in mind, studying how to create and creating HTML5 ads is more important than ever so I have been spending the past couple of days working on a few simple things as I get used to our proprietary components. One of these is a design I previously mocked up for a client, but hasn’t been signed off for development yet.

Animating a background image

For this particular design, I wanted to simply slide a background image from right to the left (edge to edge). First, I set up a container div, with background image that had background-position: 0px 0px and with overflow: hidden.

Then I added the following code to the bottom of the file to animate the background image:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

Just in case, we’re going to allow for different browsers:

@-webkit-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

Finally, we want to add code to the container class:

-moz-animation: animatedBackground 3s linear;
-webkit-animation: animatedBackground 3s linear;
animation: animatedBackground 3s linear;

We’ll notice at this stage though, that the animation will jump back to the start of the image (first frame), even though I want it to animate edge-to-edge - that is, I want it to stop at the end of the image (last frame).

To do this, we add this final line of code to the container class.

animation-fill-mode: forwards;

Ta-dah! All done. The animation will now stop on the last frame of the animation rather than jumping back to the first.

If you would rather animate the background diagonally or in a different way though, the background-position property functions as it should (format: width, height). The following code, for example would animate it diagonally downwards from the top corner to the bottom:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 100%; }
}

Have a JSFiddle to illustrate what I mean. Gists are all the rage these days, but just looking at the code doesn’t mean much - I want to see it in action and play with it!

The opposite of :hover

I was trying to figure this out in order to animate a CTA button to fade to another colour and then fade back, instead of doing what I call the ‘flicker’.

A silly question, as it turns out, because the opposite of hover is just… its natural state. Simply place the same animation on both, and it works a charm.

-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

For a little something extra, I had an arrow in the background of the button.

background-image:url("http://i.imgur.com/4uXUKVp.png");
background-repeat:no-repeat;
background-position:93% 50%;
background-size:12px 12px;

And this nicely animates during the transitioning, using the background-position properties again.

background-position:97% 50%;

Here is another JSFiddle to illustrate.

The next thing to do is to make it jiggle or dance when you hover over it. Novel, and kind of annoying even, but some clients love that kind of stuff.

I also did some other things, but that’s for another time.