CSS Animation is a powerful feature in CSS (Cascading Style Sheets) that allows you to create smooth transitions and visual effects directly on HTML elements without the need for JavaScript or Flash. CSS animations can change the style of an element over a specified duration, making it possible to animate properties like position, size, color, and other visual aspects of elements.
CSS animations typically consist of two main components:
1. Keyframes: These define the states and changes at specific points during the animation timeline. For example, you can specify what styles an element should have at the start (from), at the end (to), or at different percentages along the way (e.g., 50%).
2. Animation Properties: These are applied to the HTML elements to define the animation's behavior, such as its duration, timing function, delay, iteration count, and direction.
Example of animation using from and to
Step 1: Create a keyframe.
/* Defining keyframes */ @keyframes moveAndChangeColor { /* Using from and to */ from { transform: translateX(0); background-color:red; } to { transform: translateX(300px); background-color: green; } }
@keyframes moveAndChangeColor { ... }: This defines the keyframes for the animation named moveAndChangeColor. It specifies the changes that should happen over the duration of the animation.
from { ... } and to { ... }: These keywords specify the starting and ending styles for the animation. In this case, the animation starts with the box at its original position and color (red) and ends with the box 300px to the right and with a new color (green).
Step 2: Apply this keyframe.
.box { animation: moveAndChangeColor 5s infinite; }
animation: moveAndChangeColor 5s infinite;
This applies the animation to the .box class. The moveAndChangeColor animation runs for 5s (5 seconds) and repeats infinitely. The animation property is shorthand for several animation-related properties, which can be expanded as follows:
1. animation-name: moveAndChangeColor; Specifies the name of the keyframes to use.
2. animation-duration: 5s; Specifies how long the animation should take.
3. animation-iteration-count: infinite; Specifies that the animation should repeat infinitely.
hello-world.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { width: 100px; height: 100px; background-color: #3498db; animation: moveAndChangeColor 5s infinite; } /* Defining keyframes */ @keyframes moveAndChangeColor { /* Using from and to */ from { transform: translateX(0); background-color: red; } to { transform: translateX(400px); background-color: green; } } </style> </head> <body> <div class="box"></div> </body> </html>
Open above page, you can see that the animation is applied on the box element.
Apply animation with percentages
You can specify intermediate steps using percentage values. For example, if you want the box to pause in the middle, you can modify the keyframes like this.
@keyframes moveAndChangeColor { 0% { transform: translateX(0); background-color: red; } 50% { transform: translateX(150px); background-color: green; } 100% { transform: translateX(300px); background-color: blue; } }
In this example:
1. At 0%, the box starts from its original position with the original color.
2. At 50%, it moves to 150px and changes to a green color
3. At 100%, it completes the movement to 300px and changes to red blue.
animation-percentages.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { width: 100px; height: 100px; background-color: #3498db; animation: moveAndChangeColor 5s infinite; } /* Defining keyframes */ @keyframes moveAndChangeColor { 0% { transform: translateX(0); background-color: red; } 50% { transform: translateX(150px); background-color: green; } 100% { transform: translateX(300px); background-color: blue; } } </style> </head> <body> <div class="box"></div> </body> </html>
No comments:
Post a Comment