Properties
Individual properties:
The animation is based on the use of the following properties:
-
animation-name (required)
This property defines the name of the @keyframes rule by which the animation will be performed.
@keyframes:
The CSS property @keyframes controls the intermediate steps in the animation sequence by defining styles during the duration of the animation. Using @keyframes we can define the timing for the application of certain CSS properties during the animation sequence, 0% indicates the first moment of the animation, while 100% indicates the final state of the animation.
1234567891011@keyframes nazivPravila {0% {font-size: 10px;}30% {font-size: 15px;}100% {font-size: 12px;}} -
animation-duration (required)
Duration of one animation cycle. The initial value of the property is 0s
-
animation-timing-function (optional)
Defining a function that determines the speed of execution over time. The initial value of the property is ease
- linear – predefined transition with constant speed
- ease – a predefined transition that accelerates through the middle and slows down at the end
- ease-in – predefined transition that starts slow and then accelerates all the way to the end
- ease-out – a predefined transition that starts at high speed and then slows down to the end
- ease-in-out – a predefined transition that starts slowly, then speeds up in the middle and then slows down to the end
- cubic-bezier(x1,y1,x2,y2) – the programmer himself defines the behavior of the function. You can find help defining the “cubic-bezier()” function at cubic-bezier.com or easings.net/
-
animation-delay (optional)
Defines the time after which the transition will start from the moment the transition is activated. The initial value of the property is 0s
-
animation-direction (optional)
Defines the direction of execution of the animation in relation to the given data. After each cycle it resets and repeats. The initial value of the property is normal.
- “normal” from the defined beginning to the end
- “reverse” from the defined end to the beginning
- “alternate” first normal to the end and then reverse to the beginning
- “alternate-reverse” first backwards to the beginning and then forwards to the end
-
animation-iteration-count (optional)
Number of animation cycles. The initial value of the property is 1. In addition to the specified number, there can also be “infinite”
-
animation-fill-mode (optional)
sets which values are applied before/after the animation. The initial value of the property is none
-
The
- none element is set to its default place before the animation starts and returns to that default place after the animation ends.
- forwards element remains in the position defined for the end of the animation.
- backwards element position will already be applied before the animation actually starts.
- both animation will accept both forwards and backwards
The
Example
See the Pen erqObZ by Web programming (@chos) on CodePen.
Abbreviated syntax
The previously mentioned properties are most often used within a common property called “animation”.
|
1 |
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] |
See the Pen Animation shortened syntax by Web programming (@chos) on CodePen.
Multiple animations
On one element we can define several different animations, it is enough to separate them with a comma.
Example
See the Pen Multiple Animations by Web Programming (@chos) on CodePen.
Tips and Tricks
Restart animation
CSS property “animation” doesn’t offer a way to restart a completed animation, so you need to activate JavaScript 🙂
The only way to restart the animation is to remove the animation effect (after which the document will recalculate the style of the element) and then add the animation effects to the element again.
Example
See the Pen Restart Animation by Web Programming (@chos) on CodePen.
Restarting the animation is based on the following procedure:
- Animation must be reset first, which has the effect of removing all classes currently applied to the element, including those dealing with animation. However, changes to the “class list” are not applied until the styles are recalculated.
- To re-calculate the styles, we use the window.requestAnimationFrame() method, to which we define a callback function. The callback function is executed immediatelybefore the next “drawing” of the document.
123window.requestAnimationFrame(callbackFunkcija(){});
However, the problem is that before drawing the document, the style recalculation did not even happen! - Therefore, it is necessary that the callback function again calls the requestAnimationFrame() method, because in this case the callback function will be started before the re-drawing and after the re-calculation of the styles.
12345window.requestAnimationFrame(function(time) {window.requestAnimationFrame(function(time) {document.querySelector(".box").className = "box changing";});});
Adding a new class to the element through the callback function will trigger a redraw and thus start the animation.
Stop animation at end of sequence
Removing the “animation-name” property would stop the animation abruptly, however if we want to stop the animation only after the entire animation section is executed, we need to use JavaScript. With JavaScript, we will cancel the animation if we define animation-name: none; but only when the “animationiteration” event is “fired”. This event is fired when the animation iteration is finished. It should be emphasized that the event is not “triggered” if the animation has the “animation-iteration-count” property defined to the value one, i.e. animation-iteration-count:1;
NOTE:
The use of the
animation-direction: alternate property is not allowed when using the mentioned mechanism
Example
See the Pen Animation break by Web programming (@chos) on CodePen.