CSS animation properties
CSS Animation Properties
In web design, animation effects can add liveliness and interactivity to pages, enhancing the user experience. CSS animation properties are an important tool for implementing web animations, allowing you to create a variety of animation effects using simple CSS code. This article will detail how to use CSS animation properties and provide several sample code examples for your reference.
1. Transition Property
The transition property defines the transition effect between states of an element, controlling the smoothness of the transition. The syntax is as follows:
.element {
transition: property duration timing-function delay;
}
property: Specifies the CSS property to transition, such asall,width,color, etc.duration: Specifies the duration of the transition, in seconds or milliseconds.timing-function: Specifies the timing function of the transition, such asease,linear,ease-in-out, etc.delay: Specifies the delay before the transition starts, in seconds or milliseconds.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transition: width 1s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
Result: When you hover over the red square, its width smoothly transitions to 200px.
2. Animation Property
animation is a new property in CSS3 that allows you to create complex animation effects. You control each frame of the animation by defining keyframes. The syntax is as follows:
.element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
@keyframes name {
from {
/* initial state */
}
to {
/* end state */
}
}
name: Specifies the name of the animation, corresponding to the keyframes defined in@keyframes.duration: Specifies the duration of the animation in seconds or milliseconds.timing-function: Specifies the timing function of the animation, such asease,linear,ease-in-out, etc.delay: Specifies the delay before the animation starts, in seconds or milliseconds.iteration-count: Specifies the number of times the animation should be played, which can be a specific number orinfinite.direction: Specifies the direction of the animation, such asnormal,reverse, andalternate.fill-mode: Specifies the state of the animation before and after it plays, such asforwards,backwards, andboth.play-state: Specifies the state of the animation, such asrunningandpaused.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #00f;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output:
Result: A blue circle rotates linearly and infinitely on the page.
3. @keyframes Rule
@keyframes Rule is used to define the keyframes of an animation, controlling each frame of the animation by specifying different percentages. The syntax is as follows:
@keyframes name {
0% {
/* Initial state */
}
50% {
/* Intermediate state */
}
100% {
/* End state */
}
}
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Example</title>
<style>
.rectangle {
width: 100px;
height: 100px;
background-color: #0f0;
animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
Output:
Result: A green square appears on the page, sliding back and forth on the X-axis.
4. Transform Property
The transform property is used to transform an element, including translation, rotation, scaling, and skewing. Common values include translate(), rotate(), scale(), and skew(). The syntax is as follows:
.element {
transform: function(value);
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Example</title>
<style>
.square {
width: 100px;
height: 100px;
background-color: #ff0;
transform: rotate(45deg) scale(1.5); }
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output:
Result: A yellow square appears on the page, rotated 45 degrees, and magnified 1.5 times.
5. Perspective Property
The perspective property is used to define the perspective effect of 3D elements, giving them a sense of depth in 3D space. The syntax is as follows:
.parent {
perspective: value;
}
.child {
transform: rotateY(value);
}
perspective: Specifies the perspective distance. A larger value creates a more pronounced perspective effect.rotateY: Rotates an element around the Y axis.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perspective Example</title>
<style>
.container {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: #0ff;
transform: rotateY(45deg);
}
</style>
</head>
<body> <div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output:
Result: A blue-green square with perspective appears on the page.
6. transition-timing-function Property
The
transition-timing-function property specifies the timing function for a transition effect, controlling the speed of the transition. Commonly used values include ease, linear, ease-in, ease-out, etc. The syntax is as follows:
.element {
transition-timing-function: value;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Timing Function Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #f0f;
transition:width 1s ease-in-out;
}
.circle:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output:
Running result: When the mouse hovers over the purple circle, the width transitions smoothly using the ease-in-out time function.
7. animation-direction Property
animation-direction property specifies the direction of the animation, which can be forward, reverse, or alternating. Common values include normal, reverse, and alternate. The syntax is as follows:
.element {
animation-direction: value;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Example</title>
<style>
.rectangle {
width: 100px;
height: 100px;
background-color: #0f0;
animation: slide 2s ease-in-out infinite alternate;
}
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
Output:
Running result: There is a green square on the page that slides back and forth on the X axis, and the playback direction is alternate.
8. animation-fill-mode Property
animation-fill-mode specifies the state of an animation before and after it plays, allowing you to maintain either the final or initial state. Common values are forwards, backwards, and both. The syntax is as follows:
.element {
animation-fill-mode: value;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #00f;
animation: spin 2s linear forwards;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output:
Result: A blue circle on the page rotates 360 degrees linearly and maintains its final state.
9. animation-play-state Property
animation-play-state controls the animation’s play state, pausing or resuming it. Common values are running and paused. The syntax is as follows:
.element {
animation-play-state: value;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Play State Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #f00;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.pause-button {
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="circle"></div>
<button class="pause-button" onclick="pauseAnimation()">Pause Animation</button>
<script>
function pauseAnimation() {
var circle = document.querySelector('.circle');
circle.style.animationPlayState = circle.style.animationPlayState === 'paused' ? 'running' : 'paused';
} </script>
</body>
</html>
Output:
Result: A red circle rotates linearly and infinitely on the page. Clicking the button pauses or resumes the animation.
10. animation-delay Property
animation-delay property specifies a delay before the animation starts, allowing the animation to start after a certain amount of time. The syntax is as follows:
.element {
animation: name duration timing-function delay;
}
delay: Specifies the delay before the animation starts, in seconds or milliseconds.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Delay Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #ff0;
animation: spin 2s linear infinite 1s;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output:
Result: There is a yellow circle on the page that rotates linearly and infinitely, but it starts rotating after 1 second.