Animating an element into place


show more Animating an element into place provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Animating an element into place

In this tutorial we're going to add a little bit of a personality to a basic social media nav listing by animating it into place with CSS. This is a fun way to draw attention to certain elements on the page as it loads, but it's definitely one of those things that's best in small doses. We'll also look at animating more than one property in our keyframes. We'll be creating a slight bounce-in animation for our social media nav. So when the page loads, it will look a little like this. Normally, something like this would be in site footer, but for simplicity's sake, I've left it as the only element on my page.

Let's go into Coda and look at the HTML behind this example. The HTML behind this nav is pretty typical nav material. It's a list of links to Flickr, Dribbble, Twitter, and Facebook. If we switched to our CSS, our starter CSS is a bit more complex and usual due to the specific background positioning for each logo image in our nav. Not to worry, though, all the ...

Animating an element into place
Video duration: 5m 43s 1h 56m Intermediate

Viewers:

Animating an element into place provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...