🔵CSS过渡与动画

本文最后更新于:2024年4月25日 上午

过渡

当可动画的值变化时可响应过渡效果

transition-property属性

🍍all

设置all表示所有可动画属性变化时均触发过渡

🍍指定属性

指定的可动画属性变化时触发过渡,多个属性以逗号间隔

🍍none

transition-duration属性

该属性设置过渡持续时间,不设置或为0不会触发过渡效果

1
2
3
4
div {
transition-duration: 1s;
transition-property: padding, transform;
}

效果如下(鼠标移至或手指点击元素触发):

效果

transition-delay属性

该属性设置可动画属性改变多久后触发过渡

1
2
3
4
5
div {
transition-delay: 2s;
transition-duration: 1s;
transition-property: background-color, padding;
}

效果如下(鼠标移至或手指点击元素触发):

效果

transition-timing-function属性

设置过渡时属性变化速度(默认ease-in-out)

可用cubic-bezier函数绘制更多动画曲线

linear
ease-in
ease-out
ease-in-out
cubic-bezier(0, 1, 1, 0)
cubic-bezier(0.5, 1, 1, 0.5)
cubic-bezier(0, 2, 1, -2)

transition属性

该属性用于简写动画属性

1
2
3
div {
transition: padding 1s ease, width 2s linear;
}

动画

@keyframes关键字

可用该关键字定义动画,@keyframes [动画名] {}来添加动画

from块中填写第一帧样式

to块中填写最后一帧样式

1
2
3
4
5
6
7
8
@keyframes myAnimation{
from {
width: 20%;
}
to {
width: 100%;
}
}

也可使用百分比定义中间帧的样式

1
2
3
4
5
6
7
8
9
10
11
@keyframes myAnimation{
0% {
width: 20%;
}
66% {
width: 125%
}
100% {
width: 100%;
}
}

animation-name

该属性设置应用的动画

1
2
3
4
5
6
7
8
9
10
11
12
div {
animation-name: myAnimation;
}

@keyframes myAnimation {
from{
width: 20%;
}
to {
width: 100%;
}
}

animation-duration

该属性设置动画持续时间

1
2
3
4
div {
animation-name: myAnimation;
animation-duration: 4s;
}

效果如下:

点击展示动画

animation-timing-function

设置过渡时属性变化速度(默认ease-in-out)

可用cubic-bezier函数绘制更多动画曲线

transition-timing-function

animation-delay

设置延时多久后执行动画

1
2
3
4
5
div {
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}
点击展示动画

animation-iteration-count

该属性设置动画重复次数(默认1次)

1
2
3
4
5
div {
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
}
点击展示动画

🍒infinite

设置次数为infinite一直重复

效果如下:

animation-direction

该属性设置动画的播放方式

🍕normal(默认)

效果如下:

点击展示动画

🍕reverse

效果如下:

点击展示动画

🍕alternate

正反动画均会占用一次animation-iteration-count

效果如下:

点击展示动画

🍕alternate-reverse

正反动画均会占用一次animation-iteration-count

效果如下:

点击展示动画

animation-fill-mode

该属性设置动画开始前与结束后元素的样式是否跟随动画首末帧改变

(动画设有两秒延时,刷新重开😀)

🥕none(默认)

开始前与结束后均不改变

点击载入动画

🥕forwards

结束后改变

点击载入动画

🥕backwards

开始前改变(包括延时期间)

点击载入动画

🥕both

均改变

点击载入动画

animation-play-state

该属性设置动画暂停(paused)或执行(running)

点击暂停/继续

animation

动画属性的简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
animation: myAnimation;
animation-duration: 4s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}
/* 等价缩写 */
div {
animation: myAnimation 4s ease 1s infinite alternate both running;
}
点击插入动画

小Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
#loading{
display: flex;
}
#loading td{
margin: 3px;
width: 10px;
height: 60px;
animation: rotate 3s linear infinite;
animation-delay: calc(-0.1s*var(--i));
border-radius: 3px;
}
@keyframes rotate {
0%{
background-color: rgb(17, 128, 255);
box-shadow: 2px 2px 2px rgb(17, 128, 255);
transform: rotateX(0deg);
}
50%{
background-color: rgb(75, 255, 135);
box-shadow: 2px 2px 2px rgb(75, 255, 135);
transform: rotateX(180deg);
}
100%{
background-color: rgb(17, 128, 255);
box-shadow: 2px 2px 2px rgb(17, 128, 255);
transform: rotateX(360deg);
}
}
</style>

<div id="loading"></div>

<script>
const LOAD = function(n){
const BOX = document.getElementById('loading')
while(n--){
const BAR = document.createElement('td')
BAR.setAttribute('style', `--i:${n}`)
BOX.appendChild(BAR)
}
}
LOAD(20)
</script>

效果如下:


🔵CSS过渡与动画
https://qingshaner.com/CSS过渡与动画/
作者
清山
发布于
2022年2月18日
许可协议