Basics of CSS for Animation
In this topic, we will simplify the fundamental notions of CSS that form the basis for charming animations. In CSS, we define styles for HTML elements, and to animate them, we need to understand some essential concepts.
CSS Selectors
Selectors help identify the elements to which we will apply styles. For example, to select all paragraphs in HTML, we use p.
p {
/* estilos aqui */
}
Basic CSS Properties
Understanding properties such as color, font-size, and margin, we build the appearance of elements before animating them.
p {
color: #333;
font-size: 16px;
margin-bottom: 10px;
}
Simple Transitions
To create smooth transitions, we use “transition” and specify the properties we want to animate.
p {
transition: color 0.5s, font-size 0.5s, margin-bottom 0.5s;
}
CSS Pseudo-classes
Pseudo-classes, such as :hover, allow for different styles based on user interactions.
p:hover {
color: #ff4500; /* altera a cor ao passar o mouse */
}
Animations with Keyframes
For more advanced animations, we use keyframes. We define intermediate states to achieve complex movements.
@keyframes slide {
from {
margin-left: 0;
}
to {
margin-left: 100px;
}
}
p {
animation: slide 2s ease-in-out infinite;
}
These are the building blocks for CSS animations. By understanding these concepts, you will be ready to dive into the wonders of web animations.
