Article directory
1. Animation speed curve setting
In the CSS3 style, the attribute to set the animation speed curve is the animation-timing-function attribute;
The animation-timing-function attribute defines the time it takes for the animation to change from the initial CSS style to the end state;
Animation-timing-function attribute commonly used attribute values are as follows:
- linear : The speed of the animation is constant throughout the execution process;
- ease : The default attribute value, the animation starts at a low speed first, then accelerates execution, and finally reduces the speed before the end of execution;
- ease-in : the animation starts at a slow speed;
- ease-out : the animation ends at a slow speed;
- ease-in-out : the animation starts and ends at a slow speed;
- cubic-bezier(n,n,n,n) : custom speed curve, Bezier curve, the four parameters of this attribute value are used to define the control points of the Bezier curve;
- steps(n) : Specify the step size of the animation. By default, it is infinitely variable, that is, the animation runs in a small trend. The animation may change dozens to hundreds of times during the whole process. If it is set to 3 steps, the animation will only transform 3 times;
To make the animation start at a low speed and accelerate to execute at a low speed, you can set the following properties on the label element that performs animation:
animation-timing-function: ease-in-out;
If you want to customize the speed change Bezier curve of the animation, you can use the following property settings:
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Setting the steps(n) attribute value can disassemble the execution steps of the animation into n steps. With the help of this attribute, many special effects can be achieved;
2. Code example - animation speed curve setting
1. Code example - animation is executed at a uniform speed
The core code is:
animation: progress 4s linear forwards;
The name of the animation is progress, the execution cycle is 4 seconds, and the animation execution speed increases linearly;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画速度曲线 | 设置动画步长</title>
<style>
div {
width: 0px;
height: 50px;
background-color: pink;
/* 设置动画属性 */
animation: progress 4s linear forwards;
}
@keyframes progress {
/* 设置动画节点 */
0% {
/* 开始时盒子模型宽度 0 */
width: 0;
}
100% {
/* 执行结束后盒子模型宽度 200 */
width: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Execution effect: The following div box model gradually increases from 0 width to 200 pixel width;
2. Code example - animation is executed in 2 steps
The core code is:
animation: progress 4s steps(2) forwards;
The name of the animation is progress, the execution cycle is 4 seconds, and the animation execution is completed in two steps;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画速度曲线 | 设置动画步长</title>
<style>
div {
width: 0px;
height: 50px;
background-color: pink;
/* 设置动画属性 */
animation: progress 4s steps(2) forwards;
}
@keyframes progress {
/* 设置动画节点 */
0% {
/* 开始时盒子模型宽度 0 */
width: 0;
}
100% {
/* 执行结束后盒子模型宽度 200 */
width: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Execution effect:
- When the animation starts executing, it has no effect;
- After 2 seconds, execute the first step, and the box model becomes 100 pixels;
- After 4 seconds of execution, the execution ends, and the box model becomes 200 pixels;
3. Code example - use animation step to achieve typewriter effect
Implementation ideas:
In the box model, set 10 texts:
<div>实现一个打字机效果吧</div>
The effect of the animation is that the box model is from 0 to 200 pixels, and each text is 20 pixels;
@keyframes progress {
/* 设置动画节点 */
0% {
/* 开始时盒子模型宽度 0 */
width: 0;
}
100% {
/* 执行结束后盒子模型宽度 200 */
width: 200px;
}
}
Set each text to 20 pixels, the animation is divided into 10 steps, and the width of the box model increases by 10 pixels each time, just to display the animation;
Using white-space: nowrap;the style, you can force the text to be set in one line, so that the text does not wrap;
Use overflow: hidden;to hide content outside the bounds of the box model;
Set line height = height, you can center the text vertically;
div {
width: 0px;
height: 30px;
/* 行高 = 高度 -> 垂直居中 */
line-height: 30px;
background-color: pink;
/* 设置动画属性 */
animation: progress 4s steps(10) forwards;
/* 文字大小设置为 20 像素 , 正好 10 个字 200 像素 */
font-size: 20px;
/* 强制令文字显示在一行 */
white-space: nowrap;
/* 隐藏盒子模型边界外的内容 */
overflow: hidden;
}
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画速度曲线 | 设置动画步长</title>
<style>
div {
width: 0px;
height: 30px;
/* 行高 = 高度 -> 垂直居中 */
line-height: 30px;
background-color: pink;
/* 设置动画属性 */
animation: progress 4s steps(10) forwards;
/* 文字大小设置为 20 像素 , 正好 10 个字 200 像素 */
font-size: 20px;
/* 强制令文字显示在一行 */
white-space: nowrap;
/* 隐藏盒子模型边界外的内容 */
overflow: hidden;
}
@keyframes progress {
/* 设置动画节点 */
0% {
/* 开始时盒子模型宽度 0 */
width: 0;
}
100% {
/* 执行结束后盒子模型宽度 200 */
width: 200px;
}
}
</style>
</head>
<body>
<div>实现一个打字机效果吧</div>
</body>
</html>
Results of the :
When executing, each word appears one by one;
after execution, all the text appears;
