Project overview and plan

- [Voiceover] I've spent a bit of time talking about how most on the web is simply moving stuff from here to there. In this exercise you're going to see exactly what I've been talking about, as you use CSS3 code to move this little patch from one side of the screen to the other, and we're going to wind up by moving it back again. I want to start with this because it is important for you to understand just how stuff moves in the browser. Though you can use tools like Edge Animate or Google Web Designer to visually put objects in motion, these tools will still write the CSS3 code that makes the motion possible. And it is important that you be exposed to it in order to appreciate what these tools do in the background for you. Before we start, a word of warning. The CSS3 Standard is so new, it still hasn't achieved broad acceptance among the browsers out there. It works in many of the modern browsers that use HTML5, but if your browser isn't HTML5 compliant, nothing will work. With that out of the way, let's see how stuff moves from here to there. To get yourself started, open a code editor. I'm using Coda 2 here, but any Coda editor will do. When the editor launches, navigate to the index.html file in the Here to There folder found in your exercise folder. And when the file opens, preview it in a browser. The plan as I said is to move the patch from the left side of the page to the right side of the page. Back in our editor, I need to scroll down to the bottom here and pay attention to this line right here. As I mentioned earlier, CSS3 is still relatively new and vendor prefixes pop up in CSS3 code like weeds in your garden. This small, minified script uses JavaScript to handle the management of vendor prefixes, which I promise you, will make your life easier. As you can see, all there is on this page is an image that has the class of patch. You can use any word you want, but anything to be moved with CSS3 is going to need to be associated with a class. Scroll up to line 14 right under the Animation CSS Goes Here and let's add some properties to our patch class. So we'll start with .patch, curly brace, curly brace. The first property we're going to add is a name for our animation, so enter animation-name:moveit; the next property we're going to add is the duration, in other words, how long this thing will play. Animation, I'm gonna select it right here and it will be two seconds. I've settled on two seconds but feel free to change it. These are the two fundamental CSS3 animation properties. If you don't have a name property, the browser won't have a clue what to do. If you don't add a duration, the default value of zero will be applied and our patch will just sit there. Now that we have the properties, we need to identify the key frames for the motion. What you need to do is click once on the outside of the closing curly brace for the patch and we're going to add a rule. @keyframes moveIt, curly brace, curly brace, and now we can start identifying the key frames. The key frames rule is where the magic happens because all animation occurs between key frames. To do that we move into rather familiar territory because the key frames used to move objects move them from here to there. To set the first key frame, enter, from{transform:translateX(0);} What this does is to use the CSS transform method to move or translate our patch to the zero point on the page. Now that we've got that in, let's enter the next line. Press the Return enter key and enter to transform, colon, translate x, 600 pixels, or 600 px, close the bracket semicolon, and there we go. Now what this line does is move the patch 600 pixels to the right, that's what translate x means. Move it on the x axis 600 pixels. So let's take a look at what that does, preview. And there goes our little patch across the page. If you want to add more complex motion, or change this at a variety of key frames, this is easily accomplished, all you need to do is to change the from and to points to 0% and 100%, just like this, from 0%, that's the start, 0% on the timeline to 100% which is 600 pixels out, and you can add 50, 25, 33, 46% values and have things happen at those points. So let's make that change and test it again. And you can see it really doesn't change much other than make it easier for you to find the key frames. You've just created a very basic CSS animation which requires a set of defined key frames, a name for the animation, and its duration. We really should say pro here, so we need to determine how many times the animation plays, and add the all important slow in, slow out easings. Let's add the easing rule first, and that goes in the patch, so press the Return key after the animation duration, and enter the following patch rule. Animation, timing function, and ease-out, semicolon. There are two other values you can use, ease-in and ease-in-out. Now let's test this and see if the patch gently slides into place. And it does. Let's return to the code and instead of having the animation play once, let's have it play twice. Press the Return key enter, and add animation, iteration count, and we'll have this play twice. Now this is a handy property because you get to determine how often the animation plays. If you want it to continuously loop, we place the number two with the word infinite. So let's take a look and see if this works. Click Preview, one, two. Back to the code. Another property needs to be added. Did you notice how the patch pops back to its start position, over on the left, when the animation finishes? Let's hold the patch in place when the animation finishes. This is where the animation fill mode property comes into play. Press the Return enter key and enter animation-fill-mode:forwards; If you test it, the patch will play twice and then stay put on the last key frame. There are four possible values you can use here. None, backwards, forwards, or both. Finally, let's have the patch move to the right and then reverse course back to its start position. Press the Return enter key and add animation-direction:alternate Now this property has four values, normal, which would be a left to right motion, reverse, it moves from right to left, alternate, this is tied to the duration property on the first pass it moves left to right and on the second moves right to left. Alternate reverse, the exact opposite of the previous property, but it too, is tied to the duration property. So let's take a look at if this works. Click Preview, there it goes and it goes back and stays put. So there's alternate. So there you have it, using CSS3 to move stuff from here to there. Finally, this stuff is new and vendor prefixes are a must have when you write the code. I used a small JavaScript provided by Lea Verou, and you can pick it up at http://leaverou.github.io/prefixfree and I strongly suggest you pick up a copy. Even though this was a very basic overview, you should now have a sense of what goes on when you move stuff around in Animate or any other visual editor. There's a lot more you can do with CSS Animation, but this should get you going.