The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. Show That is, all we need is to change the property, and the fluid transition will be done by the browser. For instance, the CSS below animates changes of 1 for 3 seconds:
Now if an element has 2 class, any change of 1 is animated during 3 seconds.Click the button below to animate the background:
There are 4 properties to describe CSS transitions:
We’ll cover them in a moment, for now let’s note that the common 8 property allows declaring them together in the order: 9, as well as animating multiple properties at once.For instance, this button animates both 0 and 1:
Now, let’s cover animation properties one by one. In 4, we write a list of properties to animate, for instance: 3, 4, 5, 0. Or we could write 7, which means “animate all properties”.Do note that, there are properties which can not be animated. However, most of the generally used properties are animatable. In 5 we can specify how long the animation should take. The time should be in : in seconds 9 or milliseconds 0.In 7 we can specify the delay before the animation. For instance, if 7 is 3 and 5 is 5, then the animation starts 1 second after the property change and the total duration will be 2 seconds.Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if 7 is 7 and 5 is 5, then animation starts from the halfway point and total duration will be 1 second.Here the animation shifts numbers from 0 to 1 using CSS 2 property:Hasil script.js style.css index.html
The 3 property is animated like this:
In the example above JavaScript adds the class 4 to the element – and the animation starts:
We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative 7.Here if you click the digit – it starts the animation from the current second: Hasil script.js style.css index.html
0JavaScript does it with an extra line: 1The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast, or vice versa. It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. That property accepts two kinds of values: a Bezier curve or steps. Let’s start with the curve, as it’s used more often. The timing function can be set as a Bezier curve with 4 control points that satisfy the conditions:
The syntax for a Bezier curve in CSS: 1. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to 6 and the 4th one is 7.The timing function describes how fast the animation process goes.
The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve 1.Here’s how that curve looks: …As we can see, it’s just a straight line. As the time ( 8) passes, the completion ( 0) of the animation steadily goes from 0 to 6.The train in the example below goes from left to right with the permanent speed (click it): Hasil style.css index.html 2 3The CSS 8 is based on that curve: 4…And how can we show a train slowing down? We can use another Bezier curve: 7.The graph: As we can see, the process starts fast: the curve soars up high, and then slower and slower. Here’s the timing function in action (click the train): Hasil style.css index.html 5 3CSS: 7There are several built-in curves: 8, 9, 0, 1 and 2.The 8 is a shorthand for 1 – a straight line, which we described above.Other names are shorthands for the following 5: 9* 0 1 2 00 01 02 03 04 – by default, if there’s no timing function, 9 is used.So we could use 1 for our slowing down train: 8But it looks a bit differently. A Bezier curve can make the animation exceed its range. The control points on the curve can have any 0 coordinates: even negative or huge ones. Then the Bezier curve would also extend very low or high, making the animation go beyond its normal range.In the example below the animation code is: 9The property 3 should animate from 09 to 10.But if you click the train, you’ll see that:
Hasil style.css index.html 0 1Why it happens is pretty obvious if we look at the graph of the given Bezier curve: We moved the 0 coordinate of the 2nd point below zero, and for the 3rd point we made it over 6, so the curve goes out of the “regular” quadrant. The 0 is out of the “standard” range 9.As we know, 0 measures “the completion of the animation process”. The value 20 corresponds to the starting property value and 21 – the ending value. So values 22 move the property beyond the starting 3 and 24 – past the final 3.That’s a “soft” variant for sure. If we put 0 values like 27 and 28 then the train would jump out of the range much more.But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site http://cubic-bezier.com/. The timing function 29 allows splitting an animation into steps.Let’s see that in an example with digits. Here’s a list of digits, without any animations, just as a source: Hasil style.css index.html 2 3We’ll make the digits appear in a discrete way by making the part of the list outside of the red “window” invisible and shifting the list to the left with each step. There will be 9 steps, a step-move for each digit: 4In action: Hasil style.css index.html 5 6The first argument of 30 is the number of steps. The transform will be split into 9 parts (10% each). The time interval is automatically divided into 9 parts as well, so 31 gives us 9 seconds for the whole animation – 1 second per digit.The second argument is one of two words: 32 or 33.The 32 means that in the beginning of animation we need to make the first step immediately.We can observe that during the animation: when we click on the digit it changes to 6 (the first step) immediately, and then changes in the beginning of the next second.The process is progressing like this:
The alternative value 33 would mean that the change should be applied not in the beginning, but at the end of each second.So the process would go like this:
Here’s 51 in action (note the pause between the first digit change):Hasil style.css index.html 7 6There are also shorthand values:
These values are rarely used, because that’s not really animation, but rather a single-step change. When the CSS animation finishes the 57 event triggers.It is widely used to do an action after the animation is done. Also we can join animations. For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right: The animation is initiated by the function 58 that re-runs each time the transition finishes, and flips the direction: 9The event object for 57 has a few specific properties: 60The property that has finished animating. Can be good if we animate multiple properties simultaneously. 61The time (in seconds) that the animation took, without 7.We can join multiple simple animations together using the 63 CSS rule.It specifies the “name” of the animation and rules – what, when and where to animate. Then using the 64 property, we can attach the animation to the element and specify additional parameters for it.Here’s an example with explanations: 0There are many articles about 63 and a detailed specification.You probably won’t need 63 often, unless everything is in constant motion on your sites.CSS animations allow smoothly (or not) animated changes of one or multiple CSS properties. They are good for most animation tasks. We’re also able to use JavaScript for animations, the next chapter is devoted to that. Limitations of CSS animations compared to JavaScript animations: Kelebihan
kekurangan
The majority of animations can be implemented using CSS as described in this chapter. And the 57 event allows JavaScript to be run after the animation, so it integrates fine with the code. |