过渡
在css3中，我们为了添加某种效果可以从一种样式转变到另一种的时候，不需要再和以前一样，为该属性写js，只需要在css中添加属性就可以实现。过渡的意识就是让一个元素从一种样式转逐渐变到另一种样式，可以看见元素转变的过程，让人不会感觉到那么突兀。想要实现这一点，必须规定两项类容：
1、指定要添加效果的css属性
2、指定效果的持续时间
请看如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
div{
width: 300px;
height: 150px;
background-color: #0f0;
}
div:hover{
background-color: #f0f;
}
</style>
<body>
<div></div>
</body>
</html>
当鼠标移上去的时候，背景颜色变为紫色，鼠标移出时恢复绿色，背景颜色的两种转变，那么加上过渡属性以后是什么样呢？请看如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
div{
width: 300px;
height: 150px;
background-color: #0f0;
transition-duration: 2s;
}
div:hover{
background-color: #f0f;
}
</style>
<body>
<div></div>
</body>
</html>
这个代码和相面相比，多出来了一个属性transition-duration，这个属性表示的意思就是过渡效果花费的时间，这样就能看出来一种颜色转变到另一种颜色的过程，以列出的是过渡需要用到的属性：
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
动画
了解了过渡是如何使用的之后，我们再来看看动画效果，平常我们看见的动画效果一部分其实是图片，将每一帧的图片连续轮播，就形成了视觉上的动画，这种动画叫做帧动画。
想要创建动画，首先需要了解@keyframes：
@keyframes 指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
先看如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
div{
width: 300px;
height: 150px;
background-color: #0f0;
animation: donghua 3s infinite;
}
@keyframes donghua{
0%{
background-color: #0f0;
}
50%{
background-color: #00f;
}
100%{
background-color: #f00;
}
}
</style>
<body>
<div></div>
</body>
</html>
上面代码表示div中的颜色从绿色变为蓝色再变为红色，@keyframes可以看做一个装动画的容器，animation: donghua 3s infinite表示将容器绑定到元素上，一共执行3秒，循环。当然也可以分开写，主要属性如下所示：
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
在看看这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
font-size: 80px;
font-family: monospace;
background-color: red;
display: inline-block;
position: relative;
}
div:after{
content: '';
position: absolute;
left: 0;
top: 5px;
width: 1px;
height: 90px;
background-color: #fff;
animation: cursor 1s steps(1,end) infinite,
cover 15s steps(15,end) infinite;
}
@keyframes cursor{
0%{
background-color: rgba(0,0,0,0);
}
50%{
background-color: rgba(0,0,0,1);
}
100%{
background-color: rgba(0,0,0,0);
}
}
@keyframes cover{
0%{
left: 0;
}
100%{
left: 100%;
}
}
</style>
</head>
<body>
<div>asdfa awdddasqw</div>
</body>
</html>
以上代码模拟的是鼠标在文字中的光标效果，有兴趣的可以自己研究一下，动画还是蛮好玩的。
来源：CSDN
作者：桥钭瞂
链接：https://blog.csdn.net/m0_45251955/article/details/103939071