往期文章：
CSS过渡动画transition
transition 用于元素状态之间的平滑过渡效果。适合处理从一个状态到另一个状态的简单动画。
| 属性 | 含义 | 示例值 |
transition-property | 指定需要应用过渡的 CSS 属性 | all（全部）或具体属性名， 指定对html哪个元素进行渐变处理 |
transition-duration | 设置过渡的持续时间 | 4s, 200ms |
transition-timing-function | 控制动画的过渡速度曲线 | linear（匀速）ease(慢-块-慢) ease-in（慢-块） ease-out（快-慢) |
transition-delay | 设置延迟多久后开始动画 | 2s, 500ms |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*一、 transition过渡动画 A-B*/
p {
width: 100px;
height: 100px;
background-color: red;
transition: all 4s linear;
/*
transition-property: all 指定对html哪个元素进行渐变处理
transition-duration: 4s 指定渐变的持续时间
transition-timing-function:linear 指定渐变的变化函数linear（匀速）ease(慢-块-慢) ease-in（慢-块） ease-out（快-慢)
*/
}
/* 设置鼠标点击开始样式 */
p:hover {
width: 800px;
height: 300px;
background: gold;
}
</style>
</head>
<body>
<p>demo</p>
</body>
</html>
帧动画
animation：设置动画名称、时长、缓动函数等。--与keyframs结合使用
animation: [动画名称] [持续时间] [缓动函数] [重复次数] [动画方向];
- 动画名称：指定关键帧名称（如
aaa）。由keyframs提供- 持续时间：动画执行一次的时间（如
1s表示 1 秒）。- 缓动函数：
ease：从慢到快，再从快到慢。linear：匀速运动。ease-in：慢速开始。ease-out：慢速结束。- 重复次数：
infinite：无限循环。- 数字（如
3）：循环指定次数。- 动画方向：
normal：每次从头开始播放。alternate：每次交替方向播放（如正向、反向）。
animation: aaa 3s linear 2s infinite;
/* animation-name: aaa;
animation-duration: 3s;
animation-timing-function:linear;
animation-delay: 2s;
animation-iteration-count: 5;
animation-direction: alternate ; */
animation-name: aaa设置帧动画的名称
animation-duration: 设置动画的持续时间
animation-timing-function 设置动画的变化函数
animation-delay 进入页面延迟多久后有效果
nimation-iteration-count 执行次数 infinite无限执行（开始-结束 开始--结束 开始--结束....
animation-direction: 设置动画执行方向 alternate交替执行（开始-结束 结束-开始 开始-结束....@keyframes：定义动画的不同阶段状态。
-
@keyframes [动画名称] { [百分比或关键字] { [样式规则]; } }百分比：定义动画进行到指定百分比时的样式状态。
to：等价于100%。from：等价于0%。 - 示例：动画从文字颜色
plum（紫红色）逐渐变为palegreen（浅绿色）
@keyframes aaa {
50% {
color: plum;
}
to {
color: palegreen;
text-shadow: 20px 0 40px palegoldenrod;
}
}
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: black;
}
div {
text-align: center;
}
/* text-shadow 给文字设置阴影*/
span {
color: aqua;
font-size: 200px;
font-weight: 600;
text-shadow: 10px 0 40px palegoldenrod;
animation: aaa 1s ease infinite alternate;
}
/* 给每个文字加一个延迟，达到由I一个个把样式传到U的效果 */
span:nth-child(2)
{
animation-delay: 0.2s;
}
span:nth-child(3)
{
animation-delay: 0.3s;
}
span:nth-child(4)
{
animation-delay: 0.4s;
}
span:nth-child(5)
{
animation-delay: 0.5s;
}
span:nth-child(6)
{
animation-delay: 0.6s;
}
span:nth-child(7)
{
animation-delay: 0.8s;
}
span:nth-child(8)
{
animation-delay: 0.9s;
}
@keyframes aaa {
50% {
color: plum;
}
to {
color: palegreen;
text-shadow: 20px 0 40px palegoldenrod;
}
}
</style>
</head>
<body>
<div>
<span>I </span>
<span>L</span>
<span>O</span>
<span>V</span>
<span>E </span>
<span>Y</span>
<span>O</span>
<span>U</span>
</div>
</body>
</html>