CSS动画 animation VS transition

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、animation
二、transition
三、animation与transition的==区别==
- 3.1 animation=> 自己动，自动执行
- 3.2 transition=> 交互驱动，需要人工操作执行

前言

以下是关于CSS动画的学习笔记。

一、animation

1.1 关键帧 @keyframs

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

1
2
3
4
5
6
7

1.2关键帧中出现的 !important 将会被忽略。

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* 忽略 */
  to   { margin-top: 100px; }
}

@keyframes important2 {
  from { margin-top: 50px;
         margin-bottom: 100px; }
  to   { margin-top: 150px !important; /* 忽略 */
         margin-bottom: 50px; }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

1.3 取值：from等价于 0%,to等价于 100%。

1.4 animation 的子属性

1.4.1 animation-delay

设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

1.4.2 animation-direction

设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

1.4.3 animation-duration

设置动画一个周期的时长。

1.4.4 animation-iteration-count

设置动画重复次数，可以指定infinite无限次重复动画

1.4.5 animation-name

指定由@keyframes描述的关键帧名称。

1.4.6 animation-play-state

允许暂停和恢复动画。

1.4.7 animation-timing-function

设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

1.4.8 animation-fill-mode

指定动画执行前后如何为目标元素应用样式。

1.5 简写：

animation:名称时间速度曲线延迟次数反向

1.6 动画库

1.6.1 官网：动画库

1.6.1.1下载地址

1.6.1.2 类名（固定前缀）：animate__animated

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<link rel="stylesheet" href="./animate.min.css">
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		style>
	head>
	<body>
		<div class="animate__animated animate__swing ">div>
	body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、transition

2.1 语法

transition: 过渡的属性名称时间速度曲线延迟

2.2 all：代表过渡所有属性

transition :all 2s

2.3 过渡动画案例

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: #fff;
			}


			.container {
				display: flex;
				padding: 2px;
			}

			.item {
				display: flex;
				flex-direction: column;
				width: 25%vw;
			}

			.container:hover img {
				/* 图片滤镜 */
				filter: grayscale(100%);
			}



			.link {
				margin: 2px;
				overflow: hidden;
			}

			.link:hover img {
				/* 图片滤镜 */
				filter: grayscale(0);
			}

			.link:hover span {
				opacity: 1;
			}

			img:hover {
				transform: scale(1.2);
			}

			.link>div>span:hover {
				opacity: 1;
			}

			.link>div {
				position: relative;
			}

			.link img {
				display: block;
				width: 100%;
				transition: all .5s;
			}


			.link>div>span {
				position: absolute;
				left: 0;
				bottom: 0;
				padding: 15px;
				width: 100%;
				opacity: 0;
				transition: all 1s;
			}

			img {}
		style>
	head>
	<body>
		<div class="container">

			<div class="item">
				<a href="" class="link">
					<div class="link">
						<img src="./css/3.jpg" alt="">
						<span>我是文字3span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/2.jpg" alt="">
						<span>我是文字2span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/1.jpg" alt="">
						<span>我是文字1span>
					div>
				a>
			div>
			<div class="item">
				<a href="" class="link">
					<div>
						<img src="./css/4.jpg" alt="">
						<span>我是文字4span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/5.jpg" alt="">
						<span>我是文字5span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/6.jpg" alt="">
						<span>我是文字6span>
					div>
				a>

			div>
			<div class="item">
				<a href="" class="link">
					<div>
						<img src="./css/7.jpg" alt="">
						<span>我是文字7span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/9.jpg" alt="">
						<span>我是文字9span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/8.jpg" alt="">
						<span>我是文字8span>
					div>
				a>

			div>
			<div class="item">
				<a href="" class="link">
					<div>
						<img src="./css/11.jpg" alt="">
						<span>我是文字11span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/10.jpg" alt="">
						<span>我是文字10span>
					div>
				a>
				<a href="" class="link">
					<div>
						<img src="./css/12.jpg" alt="">
						<span>我是文字12span>
					div>
				a>
			div>

		div>
	body>
html>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

三、animation与transition的区别

3.1 animation=> 自己动，自动执行

3.2 transition=> 交互驱动，需要人工操作执行

以上就是今天要讲的内容。

相关阅读:
线程的状态
软考中级有用吗？
Github贡献PR六部曲
Python面向对象特性——多继承【Python中的mro方法搜索顺序、新式类和旧式（经典）类）】
Oracle 数据库中查询时如何使用日期(时间)作为查询条件
【知识拓展】HTTP、WebSocket 和 RPC：区别与使用场景详解
标签显示模式（display）重点
Mysql 45讲学习笔记（二十三）MYSQL怎么保证数据不丢
SETTLE约束算法的批量化处理
Docker获取镜像报错docker Error response from daemon

原文地址：https://blog.csdn.net/qq_35112578/article/details/127539623