 I am Beth Soderbergh. I am from Washington, DC. I work at an agency called CHIEF, and I do web development there using WordPress and Drupal and a lot of front-end work. So this talk is about CSS and is not platform-specific. And the goal here is to learn the basic components of what goes into making a CSS animation. There will be an animation in this presentation, but the whole thing is not on animation. It's on all the pieces that go together to make one. Because as I found when I first learned to do this, that figuring out what the pieces are and how they go together was the hardest part. And then as with many things, when you were learning to code, oh, once you have all the pieces and you put them all together in your brain, you're good to go. But getting all the pieces and putting them in the right place is hard. So the other thing I want to say before I start is that all of these slides are on the internet. I just tweeted them out. I don't want you to get preoccupied taking notes. There's a lot of code and a lot of words. And I will not read them all to you, I promise. But if you feel inclined to follow along, if you can't see in the back, I just tweeted them out. My Twitter is right there. It's at Beth Soderbergh. So feel happy with the slides, but don't feel overwhelmed by them. All right, so to start, we have a transform. And what is a transform? So the dictionary will tell us that it's something that changes in form, which makes sense from the linguistic definition. The internet world, the CSS world, the Mozilla developer network tells us that the CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the value set. That's a lot of words. And it's a lot of words that say a lot of things that aren't really on the face of it, super intelligible. And what that really means is you have a thing on your page. You've created a shape. You have an SVG and it is sitting somewhere in your DOM and you can see it on your screen in your browser. And a transform can either stretch it, rotate it, move it. That's what a transform is. So we have syntax. Syntax is clearly super fun for everyone. Reminds me of grammar, which I am not good at. Okay, so for a transform, if you have no transforms applied to your element, it's none. This is like a lot of the rest of CSS. This is not really far outside of normal patterns. If you have one transform, you have something called a transform function. And if you have multiple, you have more of those. So what is a transform function? That's the next thing that we're thinking. There are these. You can use these. They're similar to those words that were in that long definition. Rotate, scale, skew, and translate. There is also this really exciting thing called matrix. And it is so complicated. And so cool. And so not something that I can cover in the next 30 minutes. So we're not. But if you feel inspired and excited, you should look it up. It's really neat. But it is definitely a step two when you get into this type of stuff in terms of leveling yourself up. So I include it to be comprehensive, but don't let it intimidate you and don't feel like you need to use it to do lots of cool things. Okay, so rotate. Linguistically, we should all know what this means. You're rotating. In CSS, when you're rotating and you're creating a transform function to tell your object in the DOM what to do, you are rotating it clockwise from its current position by default. If you use a negative value, it goes to the left. So it's just like a clock. All right, our syntax. That's what our actual transform function for a rotate looks like. You use the word rotate and then you stick the angle in the little quote thingies. Okay, not good at grammar, remember? Okay, so for all of the examples in this presentation, we are going to use this really handy yellow box. And this is the underlying HTML and CSS that are defining the box. I'm not gonna repeat this on every slide where I have an example, but for your reference, they're all 3Ms wide and 3Ms tall. They all have this yellow background. They all have the class box. So when you're looking through the examples and the slides, that's applicable to all of them. And they all have a smiley. Because why would you not put a smiley in your examples? And really, for a lot of things, it's easier to show how things are shifting and moving when you have an actual shape and why not use a smiley font icon rather than, I don't know, a boring letter. So that's what we have as our default. All right, so here, here's our smiley box and we've rotated it 25 degrees to the right. It's super straightforward. And to go to the left, tada, see? Easy, everyone can do it. You just add a negative. All right, scale. Making things grow and shrink, right? Scaling an element relative to its original size. So this is very relative to itself and that's the thing that you need to remember when you're working with this particular property. So we've got a syntax here. There's a pattern here throughout my slides. So this, you can do a compound where you're scaling with the value x and the value y. If you only specify one, you are only going to have, you're going to have equivalent elements assumed. So they're the same. Or you can specify just one at a time. So here we shrink our box to half size. Let me get smaller. And we're just using a relative unit there, so 0.5. And then in the second example, we're doubling our y-axis. So we're saying x-axis, it stays the same. It's at the scale of one, so the original. And the y-axis is double, so it's a two. All right, skew. Skew makes things look like kites in our example. So we are skewing an element along the x or the y-axis by an angle value. This is something that I find a little hard to put into words. So we're just gonna look at the syntax because we have to and then we're gonna look at the example. So the syntax, you can use the compound except you shouldn't because different browsers interpret this really differently and things will break in really horrible and scary ways. So don't, until the browsers agree on how this should work, you shouldn't use it. So instead for skew, you should use the separate ones. So skew x, angle x, skew y, angle y. All right, so our examples. When you skew this box to the left, it just goes over a little bit. And then to left and up, then that's where we're making our kite. When you're doing this, this is one of those properties that I always tend to have to play around with to get the effect that I want because I'm not super great at predicting what's gonna happen when I skew, especially by degrees. It's a little abstract to me. And with a lot of these things, that's just the case. You have to play with it to see what works and what looks good. And it's not something wrong with you about how you do math or how you think about angles. It's just part of working with the internet in a way that's a little bit more mindful towards art and craft rather than specific pixel perfect. This thing has to be this way. All right, translate. Translate is a little bit more abstract in terms of having the term match what it does. And this is a long explanation of what it does. But basically, you move the thing. The element in the DOM moves and it's moving along a coordinate plane. Think elementary school math class except the coordinate plane is a little weird. It's not exactly like it was in elementary school. So the negative values will move things to the left, which I'm thinking of that graph in elementary school where you've got the y-axis that goes up and down and the x-axis that goes here and your teacher tells you to plot these five points. Everyone's familiar with that experience. So your negative values along the x-axis will take you to the left. Positive values take you to the right. The y-axis is what I find confusing because the y-axis is like a yo-yo, right? And I always thought that the negative values in school were below, right? And the positive were above. But with this, it's different, it's opposite. So just keep that in mind. All right, so the syntax, same as before. This is a pattern that repeats itself throughout transforms. So it's the same stuff. Our example, we've got our yellow box. I've put a wrapper around it so you can see it's starting point. And it's just a six M wide and tall box for those of you who can't see the code. And now we're gonna move it to the bottom right. So we're translating it three M's over and three M's down. So the question here is why would you do this ever on the internet, right? It's you're positioning things in a way that's not using, I don't know, floats alignment percentages. I mean, you could use percentages, but really why would you do this? And the answer is because the browser load. So it's a more efficient way to move things around. So as you're moving towards actually animating a property, this is faster and your browser gets less tired and cranky and slow when you do it. So that's why this is useful. You should never create a page layout using this unless you're going to move it around. And if you are going to do that, you should have a very good reason as with most animations. So we'll get there. Okay, so with transforms, you're like, oh great, you moved the thing. But where are we moving the thing from? The transformation has to come from a point in the coordinate space, right? Cause we're dealing with a plane. By default, it's coming from the middle. So our box, it's coming from like, where are the little smiley faces nose would be if it had a nose, right? So the transform origin property helps determine where in the space of the thing that you're animating or moving or placing, where is it being moved from? This is the more formal way to say that. Default, as I said, is in the middle. So it's 50% and 50%, that's the center. So syntax of this is to have the X offset first and then the Y offset. You can see here, it's the length or the percentage from the left and the top. So you're again going to the right and down in your coordinate space. You can use keywords. So these happen in other places in CSS. Left, center, right, top, you can use percentages. You can use pixel values. You can use lots of things to really get specific about where your transform origin is going to be. There was one time when I was animating this arm and the arm was attached to a little baby and I needed to make the arm look like it was in the arm socket and I spent a lot of time playing with the transform origin because otherwise the baby looked like it didn't have an arm and that is a problem. Okay, this is the real life application of these things. We want all of the babies on the internet to have all of their appendages. Okay, so some examples of this. We're rotating 25 degrees to the left and we're transforming from the top right. So you can see I kind of grayed out where the original positioning was in the back and you can see where it's coming from. The same rotation but from the bottom right moves it down in the coordinate space. So you can get really specific about where you're placing these things and again, you can see why you need to play with things to make it work. Otherwise you're just gonna be fiddling around and stuff's gonna be floating and it's not gonna look good at all. Okay. Browser support. My favorite subject. Transforms are really well supported. So if you are using internet explorer nine and above, you can create diamonds on the internet. When you're talking about internet explorer eight, there's some workarounds. We can talk about that later. But it depends very specifically on what you're trying to do and in a lot of cases, you should make sure that you have adequate fallbacks in place just in case and it especially depends on who your client is and communicating to them what their expectations are and that gets more and more true the more we get into actual animation. So 3D transforms are coming. So adding in a Z axis. So coming towards and behind you but internet explorer is behind in supporting said really cool thing that the internet really clearly needs. So prefix requirements, there's a few of them. Use them, love them, add them to your sasks. Be happy. All right. So that is a transform. Super basic transforms. Transitions. A transition is from one thing to another, right? So this is what dictionary.com says which is clearly the authority in all things and I think it's a decent definition. That's what it generally means in real life on the internet we have this definition from CSS tricks which is my favorite definition that I found on this. So the transition property is a shorthand property used to represent up to four transition related longhand properties that allow elements to change values over a specified duration. Animating the property changes rather than having them occur immediately. So again, that's a lot of words. Let's just step back and dissect those for a second. So what it's saying is that there's a bunch of different ways that you can impact how something moves from one state to another and that the transition family includes those ways. Here they are. Here's the family. So we're gonna go through each one of these and talk a little bit about how each one works. The transition syntax, here's the shorthand. So it's all of those four properties from the previous slide just in a row and it goes in that order. And then you can specify them each individually as you can with many other properties in CSS. So very straightforward. The transition property, which is very meta, it tells which properties are impacted. By default, it is all of them and you can use this to restrict and change how things are working together. So most of the time you're not gonna touch this but you could and use it in a more combined way with other things. So this example set has stages. Our first example has just the transition property only. So it's not gonna do that much. We have our starting state. The transition property is specifying that we're changing the color, the background color and the width. Okay, and we've got our starting values which are the same as before. Then our active state says, oh, we're changing the color of our smiley face and we're changing the background to a raspberry and we're making it wider. But when you hover over it, it's like really jolty. It's like why would anyone who wants to hover on this have that experience? The direct application to this in the real world is buttons. The best use of animation in my opinion is in subtle ways that make things feel a little more polished and fancy. You really wanna feel luxurious when you're clicking that button, right? But you don't wanna feel too luxurious. You don't want it to take too long to click the button. So be careful with that. But hovers and small things is typically where a lot of this will come into play. There are obviously super fancy websites that have super interactive things and you can get there. But as with many things in life, taste is something that's really important when you're applying this stuff and you should consider what the internet looked like when animated GIFs first happened and realize that this is the modern equivalent of that and maybe you should dial it back. So just be careful. All right, so that's basically the default state. Transition duration, how long is this gonna last? So I referred to the button. How long does it take to press the button or how long does it take to look like you've pressed the button, right? You actually already pressed the button, so. All right, how long it takes? You just stick the value in there. The accepted values are very standard time units for specifying things on the internet. Seconds, milliseconds, these things. Okay, so we have our example. The starting state is the same except we've added a transition duration of two seconds. So our active state now looks a little more fancy and we can see the orange, which is really lovely in between this and it gets a little vibrant and a little, my art teachers wouldn't have liked this. They would have said that it vibrated in the middle with the color transition, but that's okay. This is just an example. Okay, the transition timing property. This is a really fun property and is also something that can take a lot of time to get right when you're trying to do something specific with an animation. So it specifies the pace at which your transition will run and this is the syntax, you just stick the value in it like you would anything else, but the values are the complicated thing about this. I've included a link in my slides, which is apparently not in this slide, but I promise it's coming later that really goes into depth about what each of these things mean, the accepted values. Basically what they are describing is the rate at which things change. So ease in, ease out. Is it faster when you start? Is it faster when you end? So I guess slower either way. Okay, so that's how that works and there's a lot of resources on that and it's really complicated, but think of it as how fast or slow is it going? You can be really custom and you can make it go faster and then slower and then faster and all of these things. All right, so our example. We have a starting state that now includes a transition timing function of ease in. So it's gonna be slow and then fast. And our active state, this is a little hard to see, but if you start to play with this later, you'll see what I mean, it's a little nuanced. Slow, faster. And then notably, when I take my cursor off and remove the hover state, slow and then faster again. All right, the best example I have of using this in a real live scenario, I had to figure out how to make a heart look like it was beating once. And when you think about it, a heartbeat is not like an in-out thing, right? It's more of a that sort of pattern. So I spend a lot of time playing with that and eventually I had this animated SVG that was of the heart with the little aorta coming out of it and all of that and it looked pretty heart-like and it filled with blood while it pulsed, which was even better. All right, so the transition delay property is really super helpful when you want to chain things together. With the example of the button, why would you want a transition delay? That is the most confusing user experience ever, right? Let's hover on the button and then three seconds later have it do something. No, but when you're chaining together events as happens in animation, it becomes useful to have delays and have a timing function that you can use to specify how long something should wait before it starts. There's a number of ways of doing that with JavaScript and other things too, but for sticking just to CSS, this is a very useful function to be using. All right, so again, syntax, you just stick a value in the property. The values are the same time values that we've seen before and you can have all sorts of complicated things there. So now we have our example again. We've added a starting state that includes a transition delay of three seconds and we are showing our very poor example of what happens when you do this to buttons. And you just wait for a second. Oh, there we go. This is what you shouldn't do, but use it creatively in more positive ways. All right, and then notably, wait for it. Oh, there we go. You can, and this plays into the idea that right now it's doing that because the hover state is what's animated. I could be adding animation, or it's animated, I use that. It's using a transition property, but you can add these to different parts so that different things happen when you hover versus remove hover and things like that. All right, browser support. It's a little bit more bleak. Internet Explorer 10 plus, but again, progressive enhancement is should be the goal with this stuff. You shouldn't be relying on any of this to convey information and if you do, you need a fallback that conveys the information just in a different way. Some prefix requirements, but not too bad. All right, so the animation part, which is what everyone gets excited about, but you need the other pieces to really put it together. And animation in CSS is a little different than animation in a lot of other places. So my favorite thing when I was doing the research for this presentation and I was checking the dictionary to see what these words meant to the world linguistically is what dictionary.com said animation means. The state or condition of being animated. And I thought, no kidding. And then the second definition on dictionary.com is even better. Containing representations of animals or mechanical objects that appear to move as real ones do. It's a very Disney approach to animation. So it can be used in a lot of other ways. In terms of CSS and the internet, CSS animation uses something called keyframes and it is a way for authors to animate the values of CSS properties over time using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats and repeating behavior. So think of a keyframe as if you've seen those cells of like going back to the Disney animals that are clearly the only things that can be animated. The old cells that are hand-painted or those flip books you might have had when you were a kid with each individual thing, a keyframe, think of them as the cells. And you're shifting between a whole bunch of them to get something that appears to move in a certain way. All right, so let's look at the keyframe thing because this is conceptually a little weird. They're the things that are establishing the behavior of an animation over time. So there are only two required properties and these make sense. The duration, how long should this thing move? It's very straightforward. And the name, the name is a little unorthodox for CSS and you'll see why in a minute but you need to name your animations yourself. Okay, optional properties. Again, I'm not going to go into all of these because we have a limited amount of time but there's all sorts of resources on the internet. Google them, they're fun. And I have more resources at the end of this presentation as well. All right, the animation duration property. This is the length of time of one cycle. We've got the syntax, it's the same as everything else. You stick a value in it. What are the values? They're time related. Okay, the animation name property. This is specifying the animations that should be applied to the element. The syntax is animation name and then whatever you want, just don't add spaces. Like I said, it's a little weird. Okay, custom string with no spaces and punctuation is also a no-no but hopefully that was self-evident but maybe not. Okay, we're going to look at one of those other properties so that we can really understand the example once we get to it. The animation iteration count property. So this kind of is exactly what it sounds like. It's how many times the thing happens. So the syntax has a value and the accepted values are numerical and then you also have some word-based values whether it goes on forever and is an infinite or it's inheriting something from something else. All right, how does this go together to create something that moves? So how are we calling this? This is what your call for the animation looks like. So you have the animation duration, how long the thing takes and you have your name, which is your custom value but where is your custom value coming from? It's just not out in the ether, you invented it. You can also, any of those other properties go in the same code block as this one. Okay, so the syntax for the keyframe itself, it's kind of like a media query. You have at keyframes and then you put your animation name, that thing that you made up after it and then inside that, you are identifying waypoints. So the things that happen along the duration of the iteration are going in here. So the animation name, that's the thing that you define yourself. The keyframe location is the waypoint. The CSS properties are whatever you want to change in that animation. And you should also know that you can't actually animate everything in CSS. There's a lot of things you can animate and there's a lot of things that you would really want to animate and you are trying to make it work and you just think that you've added a semicolon somewhere wrong, but really it's not possible. So look it up. There's a list here of what can and cannot be animated in CSS. All right, my example is egregious and horrible and you should never do this. Going back to our animated GIFs. The, but let's break down the code and explain how it's happening here. We have our box the same that we've always had. The animation duration is one second. Our animation name is arbitrary and I named it zoom pulse because that's what it's doing, which is wrong, but that's what it's doing. And I'm making it happen forever by identifying the iteration count as infinite. And then in my actual keyframe declaration, I'm saying, okay, zoom pulse has these seven waypoints and they are defined by percentage and at those waypoints, I'm using the transforms from earlier to rotate it and make it bigger and smaller, creating this lovely, lovely effect that you see here. All right, so for reference, I included this in the slides. These are all of the properties that I didn't cover and what their default animation values are. So you can use that as reference if you want. Included it just to make sure that this was actually a cohesive thing that someone could use later. All right, browser support. It's okay, could be better. Internet Explorer is again lagging, but again, this should always be viewed as a progressive enhancement and it should always be framed that way to clients, at least until the internet changes, which I hear is coming soon, hopefully. Okay, prefix requirements are still a webkit and now I have some resources for you to learn more and obviously we're gonna open up for Q and A as well. The working drafts of these, they're really kind of like, they're a little scary when you get into them, but they are really detailed and will really help you if you're trying to get into the nitty gritty of this. Books, I'm a book learner. I think it's really important to know what kind of learner you are and I play games on my phone when I watch videos and I get frustrated and angry when I try to do something on my own, when I'm giving a project, and so when I'm given a project, I buy books and these books are the two of my favorites on animation. If you're going to get into learning this, I highly suggest you read them in order. I tried to read the second book first and that was a mistake. It's a great book. It should be read after the first book. And then I have some blog posts that I've written about some of these topics on my blog and links to slides and all these other things and that's there and that is it and you can find me on the internet here. You can find Chief there and you can find the presentation on SlideShare. So I'm going to open up for questions and hopefully that made sense. All right. Thanks, that was a really great presentation. Could you speak a little bit maybe about like performance? I've noticed a lot of times, especially if I try to combine like more than one transformer at a time, it can get a little laggy. Yeah. I've heard there's some tricks around that, but... Some of the tricks involve what you're actually animating. So there's often a choice to make between using something like an SVG, which is going to be a lot less labor intensive for the browser and an image or something like that. I've also done things like create circles out of CSS and then change the color to make them look like they're blinking without actually taking them away or even moving them. So some of it is reframing the way you're thinking about what you're doing. When you're animating something, you're deconstructing it in order to reconstruct an appearance of what you want. So you need to think about the choices that you're making when you do that. I'm a huge fan of SVGs for animation, for the purpose of you load them and then you can move stuff around. You can interact with them in CSS and JavaScript in a way that can combine in a way that's a lot less labor intensive than some other methods. So hopefully that helps. Thanks. One more? We're out of time. Sorry, but you can come talk to me and thank you so much for your time and enjoy the rest of WorkCamp US.