Animation Support Breakdown

[00:00:01]
>> Sarah Drasner: SVGs for animation support breakdown or how I learned to love the inline. I mentioned a couple of times that inline is my favorite way of working with SVG but let's talk about that really quickly. For image source, object, embed, background URL and iFrame you can only designate animation if it's inside the SVG.

[00:00:20]
Also, the problem with this is that sometimes, if you execute scripts inside of an SVG, because you can actually execute scripts and also do CSS animation, the browser is like, this is an image and it's executing things. [LAUGH] What, shut it down, shut it down. So I would not actually suggest you doing this, it can kind of cause some security errors.

[00:00:44]
For inline, both SVG animation and interaction are supported. So for the length of this class what I'm gonna ask you to do is whenever you're working with SVG you actually put it directly inline in the HTML. So let's talk about animating with CSS, just like a really quick refresher.

[00:01:02]
So this course kind of assumes that you've worked with CSS animation before. We're gonna talk about a couple gotchas before I send you on your way animating. So we have some keyframes, you're gonna @keyframes animation-name-you-pick. Don't call your animations animation-name-you-pick. We have at 0%, background is blue. The transform is translate x0.

[00:01:26]
Then 50%, it turns purple, and it moves over by 50 pixels. Then at 100%, it's gonna move over 100 pixels. So if we apply this to a ball, we're gonna say, animation-name-you-pick, it's It's gonna be two seconds long, it's gonna wait two seconds before it starts animating, it's gonna happen three times.

[00:01:45]
It's gonna alternate, so it's gonna go this way, this way, this way for each iteration. The easing structure is ease-in-out, and forwards for both, make sure that the animation doesn't snap back to its original state. Cool, so here's what that looks like with the div, right? It's kind of what you would expect.

[00:02:06]
That's what we talked about it doing, so that's not surprising that it's doing that, cool.