Today the web language is very visual for several reasons; because graphic elements improve the understanding of a message, because they break the monotony in a block of text and because the ability of people to interpret arbitrary symbols and apply a specific meaning to them allows us to encode messages much faster than the textual alternative. In addition, with the increase in the capacities of the devices, of the connection networks and of the web languages, it is allowing us to use and serve larger graphic resources, of greater weight, and in many aspects, more demanding. So we dusted off the animated gifs again to give it a new twist because life is movement, and this is the trend and a tool that helps us with this is the CSS language which we will see today.
CSS3 animations allow you to animate the transition between one CSS style and another. The animations consist of two components: a style that describes the CSS animation and a set of frames that indicate its initial and final state, as well as possible intermediate points in it, also, you have to know that CSS animations have three main advantages over traditional script-based animation techniques:
▸They are very easy to use for simple animations, you can do it even without having knowledge of Javascript.
▸Animation displays correctly, even on low-power computers. Simple animations made in Javascript can look bad (unless they are done very well). The rendering engine can use optimization techniques such as frame-skipping or other techniques to make the animation run as smooth as possible.
▸Being the browser who controls the sequence of the animation, we allow you to optimize its performance and efficiency, for example, reducing the update frequency of the animation by executing it in tabs that are not visible.
To create a CSS animation sequence, you will stylize the element you want to animate with the animation property and its sub-properties. With them we can not only configure the rhythm and duration of the animation but also other details about the animation sequence, the animation subproperties are:
▸animation-delay: Delay time between the moment the element is loaded and the beginning of the animation sequence.
▸animation-direction: Indicates whether the animation should go back to the start frame at the end of the sequence or whether it should start from the beginning when it reaches the end.
▸animation-duration: Indicates the amount of time the animation takes to complete its cycle (duration).
▸animation-iteration-count: The number of times it is repeated. We can indicate infinite to repeat the animation indefinitely.
▸animation-name: Specifies the name of the @keyframes rule that describes the frames of the animation.
▸animation-play-state: Allows you to pause and resume the animation sequence.
▸animation-timing-function: Indicates the rhythm of the animation, that is, how the animation frames are displayed, establishing acceleration curves.
▸animation-fill-mode: Specifies what values the properties will have after the animation ends (those before it is run, those of the last frame of the animation, or both).
Once the animation time is set, we need to define its appearance. We will do this by setting two more frames using the @keyframes rule. Each frame describes how each animated element is displayed at any given time during the animation sequence. From the time and rhythm of the animation is defined, the frame uses percentage to indicate at what point in the animation sequence it takes place. 0% is the beginning, 100% is the end state of the animation. We must specify these two moments so that the browser knows where to start and end; Due to their importance, these two call from and to.
