Contenido del Curso
Advanced CSS Techniques
Advanced CSS Techniques
What is Transition?
Sometimes, we must create animations for element changes on a web page with controlling factors such as speed, delay time, and duration. In such cases, the transition
property can be utilized to accomplish this task.
The element always has two states: initial and final. We can control the element change behavior with the help of the following properties:
transition-property
- The name of the CSS property that we need to animate;transition-duration
- The time during which we need to change the element state. It is specified in seconds (s
) or milliseconds (ms
);transition-timing-function
- It specifies the speed curve of the transition effect. Typical values areease
,linear
,ease-in
,ease-out
, andease-in-out
;transition-delay
- The time delay before the transition effect starts. It is specified in seconds (s
) or milliseconds (ms
).
We will consider each property further in this course.
Note
1
second =1000
milliseconds. So:
0.1
s =100
ms;2.5
s =2500
ms;0.5
s =500
ms.
Practice
For example, we want to add a transition
effect to the background color of the div
element when it's hovered over. Our task is:
- To change the
background-color
property; - The delay has to be
0.1
seconds; - The change of the color has to last
0.3
seconds; - For the
timing-function
, we expectease-in-out
value, which means it will start slow, speed up in the middle, and then slow down again at the end.
Hover the element with the help of the cursor to see the result.
index
index
index
We specified all transition related properties to the div
element and then for the hover
we set only the decoration which we would like to see.
¡Gracias por tus comentarios!