**Using `@keyframes` for Animations:**
```css
/* Define the animation */
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
/* Apply the animation to an element */
.animated-element {
width: 100px;
height: 100px;
background-color: blue;
animation: slide 2s ease-in-out infinite;
}
```
In the example above:
- `@keyframes slide`: Defines the animation called "slide."
- `0%` and `100%`: These are keyframe points defining the animation's start and end states.
- `transform: translateX(0)` and `transform: translateX(200px)`: These specify the transformation at the keyframes.
- `.animated-element`: The class applied to the HTML element you want to animate.
- `animation: slide 2s ease-in-out infinite;`: Applies the "slide" animation, running for 2 seconds with an ease-in-out timing function, and repeating infinitely.
**Using `animation` Property:**
You can also use the `animation` property with separate animation values:
```css
.animated-element {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
```
**Multiple Animations:**
You can combine multiple animations as well:
```css
@keyframes fadeAndSlide {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated-element {
animation: fadeAndSlide 1s ease-out, slide 2s ease-in-out infinite;
}
```
In this example, both the "fadeAndSlide" and "slide" animations will be applied to the `.animated-element`.
Remember that these are basic examples. CSS animations can be as simple or complex as you want them to be, with various properties like delays, keyframe percentages, and more. You can also explore CSS transitions for smoother property changes.
0 Comments