Title unit-2.pdf ✅

Multimedia UNIT-2 By Dr.G.S.Puranik 1 What are CSS Animations? An animation is nothing more than a visualization of change—a change that occurs over a period of time.  An animation lets an element gradually change from one style to another.You can change as many CSS properties you want, as many times as you want.  To use CSS animation, you must first specify some keyframes for the animation.  Keyframes hold what styles the element will have at certain times. The @keyframes Rule: The Start and End States: If visualizing change is an important part of an animation, we need to create some reference points so that we can compare what has changed. Let’s call these reference points the start state and the end state. To better explain what is going on, let’s come up with an easy-to-understand example as well. Figure 1-3. In the beginning, there was a small blue circle You start off with a small blue circle located to the left of the screen. At the end state, your blue circle now looks sorta kinda like Figure 1-4. Figure 1-4. The circle moves right and grows larger Based just on the information you have about what our blue circle looks like in the start and end states, what can you tell is different?
Multimedia UNIT-2 By Dr.G.S.Puranik 2 One change is the position. Our blue circle starts off on the left side of the screen. It ends up on the right side. Another change is the size. Our circle goes from being small to being much larger. How do we make an animation out of this? If we were to just play the start and end states repeatedly, what you would see is a circle that just bounces from left to right very awkwardly. That is pretty turrible. Just turrible. What we need is a way to smooth things out between the start and end states. What we need is a healthy dose of interpolation. Interpolation: Right now, what we have are two discrete states in time: the start state and the end state. If you were to play this back, it wouldn’t be an animation. “In order to make an animation a smooth transition that creates all the intermediate states. The process of creating these intermediate states is known as interpolation.” This interpolation, which occurs over a period of time that you specify, would look similar to Figure 1-5. Figure 1-5. Behold...an animation! You may be wondering who specifies the interpolated states. The answer, which is probably good news, is that your browser or HTML rendering engine will take care of the messy details. All you need to specify is the start state, the end state, and the duration over which the transition between the two states needs to occur. Once you have those three things, you have an animation! Later you’ll see how adding some other ingredients into the pot, such as timing functions (aka easing functions), can alter how the interpolation works. For now, though, just revel in this simple explanation of what makes up an animation, put on your best party clothes, and get ready to meet the three flavors of animation that you will end up using.

Multimedia UNIT-2 By Dr.G.S.Puranik 4 Transitions make up a class of animations where you only define the start state, end state, and duration. The rest, such as interpolating between the two states, is taken care of automatically for you (see Figure 1-7). Figure 1-7. Transitions only need a start and end state to do their thing While transitions seem like a watered-down, simplified keyframe animation, don’t let that trick you. They are extremely powerful and probably the type of animation implementation you’ll use the most. Scripted/JavaScript animations If you want full control over what your animation does right down to how it interpolates between states, you can use JavaScript (see Figure 1-8). Figure 1-8. When you use JavaScript, you have a lot of freedom in defining how your animation works There are a lot of cool things you can do when you opt out of the interpolation the browser does for you, but we won’t be spending too much time in this area. Scripted animations have