1. transition
It is the transition of an element from a value (red) of this attribute (color) to another value (green) of this attribute (color). This is a state transition. A condition is required to trigger this transition, such as hoever,: focus,: checked, media query or JavaScript.
Syntax: Transition: Property duration timing function delay;
| value | describe |
|---|---|
| transition-property | Specifies the name of the CSS property that sets the transition effect |
| transition-duration | Specifies how many seconds or milliseconds it takes to complete the transition effect |
| transition-timing-function | Speed curve of specified speed effect |
| transition-delay | Defines when the transition effect begins |
For example:
transition:all 2s linear 0s;
Set all elements to have transition effect. The time to complete the transition effect is 2s, the transition speed curve is linear, and the start time of the transition effect is 0s
2. animation
In the official introduction, this attribute is an extension of the transition attribute, which makes up for many shortcomings of transition. I understand that animation is the superposition of multiple transition effects, which is more operable and can make complex and cool effects.
Syntax: Animation: name duration timing function delay iteration count direction play state fill mode;
| value | describe |
|---|---|
| name | Used to call the animation defined by @ keyframes, which is consistent with the animation name defined by @ keyframes |
| duration | Specifies the duration for which the element plays the animation |
| timing-function | The speed curve that specifies the speed effect is the transformation rate for the time range of each small animation |
| delay | Defines the time to wait before the browser starts executing the animation, which is the time to wait before the entire animation is executed |
| iteration-count | Defines the number of playback times of the animation, which can be specific or infinite |
| direction | Set the animation playback direction: normal, reverse, alternate, alternate reverse |
| play-state | Controls the playback state of the element animation, which controls the pause and continuation of the animation. There are two values: running and paused |
| fill-mode | Controls the style of the element after the animation ends. There are four values: none (return to the state when the animation does not start), forwards (the animation stays in the end state after the animation ends), backwords (the animation returns to the state of the first frame), both (apply the forwards and backwards rules in turn according to the animation direction). Note that it does not conflict with the iteration count (the animation is executed infinitely) |
For example: animation: history 5s ease 0s infinite normal running none;
The name is history, the animation duration is 5s, the speed curve is ease, the delay time is 0s, the infinite cycle mode, the animation playback direction is in chronological order, the animation is set to the running state, and the animation filling mode is to return to the animation start state.
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
animation: history 5s ease 0s infinite normal running none;
}
@keyframes history{
0%{
transform: translateX(0px);
}
20%{
transform: translateX(10px);
}
50%{
transform: translateX(100px);
}
100%{
transform: translateX(300px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>The difference between animation and transition is that keyframes provide more control, especially the control of time axis, which makes css animation more powerful, so that some animation effects of flash can be directly controlled by css. All this requires only a few lines of code. Therefore, a large number of css based animation libraries have been born to replace the animation part of flash.
Example: beating heart
<!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>Document</title>
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;
}
.heart{
width: 100px;
height: 100px;
position: relative;
margin: 150px auto;
/* Animating can go back and forth */
animation: heart 0.5s infinite alternate;
}
@keyframes heart{
from{
transform: scale(1);
}
to{
transform: scale(2);
}
}
.heart>.left{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50% 0 0 50%;
position: absolute;
transform: rotate(45deg) translateX(-70px);
}
.heart>.right{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50% 50% 0 0;
position: absolute;
transform: rotate(45deg) translateY(-70px);
}
.heart>.bottom{
background-color: red;
width: 100px;
height: 100px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>Effect achieved:
