Contenido del Curso
Advanced CSS Techniques
Advanced CSS Techniques
What is Animation?
Animations can create complex and dynamic effects to improve user interactive experience. Animations do not require a specific trigger event and can be set to repeat infinitely. Additionally, animations can have multiple intermediate states between the initial and final states, providing greater flexibility and control over the visual effects produced.
Create animation
We can create animations using the @keyframes
rule, which defines a set of CSS styles at various points in an animation. Also, we set the name for the animation. It must be descriptive, that is, saying what kind of animation it is.
To determine the change of properties at a specific point in time, we can use the keywords: from
(0%
) and to
(100%
). Most often, the percentage values are used.
Once the animation has been declared, we can utilize the keyframes name as the value for the animation-name
property across various elements. Another advantage of animations is that they can be applied repeatedly to multiple elements.
Practice
Let's add some animation to the div
element. Our task is to change the background-color
property in time. The initial state will be green
, then at the 60%
we need to make it red
, and in the final state, we need blue
. Additionally, we will specify the animation-duration
property to notice the animation in work.
index
index
index
¡Gracias por tus comentarios!