一、使用规则
- @keyframes
用于定义动画的关键帧。
- animation属性
用于将@keyframes动画用于元素上。
二、基本语法
- @keyframes
@keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}/*(0%,25%，50%,75%100%)定义了动画的各个阶段*/ }@keyframes Fadeimg{ /*实现动画变淡的过程*/from{ /*初始状态,类似于0%*/opacity: 1;}precent{ /*中间状态—50%*/opacity: 0.5;}to{ /*结束的状态-100%*/opacity: 0;}- animation
.box1 img{width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/animation: xuanZhuan 10s infinite linear; /*旋转10s,以线性速度无限旋转*/}.box2{width: 200px;height: 200px;background-color: #bb2a2ae3;animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画</title><style>@keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}/*(0%,50%,100%)定义了动画的各个阶段*/ }@keyframes Fadeimg{ /*实现动画变淡的过程*/from{ /*初始状态,类似于0%*/opacity: 1;}precent{ /*中间状态—50%*/opacity: 0.5;}to{ /*结束的状态-100%*/opacity: 0;}}.box{display: flex;flex-direction: row;}.box1{ width: 300px;height: 300px;}.box1 img{width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/animation: xuanZhuan 10s infinite linear; /*旋转10s,以线性速度无限旋转*/}.box2{width: 200px;height: 200px;background-color: #bb2a2ae3;animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/}</style>
</head>
<body><div class="box"><div class="box1"><img src="图片/头像.jpg"></div><div class="box2"></div></div>
</body>
</html>动画效果：
/*这个动画效果视频上传后，我这里并没有播放出来*/
媒体1
三、@keyframes 的常见用途
- transform
| 函数名 | 用途 |
| translate（x,y) | 将元素在水平和垂直方向上移动。 |
| translateX(x) | 水平上移动 |
| translateY(y) | 垂直上移动 |
| translate3d(x,y,z) | 分别表示在x,y,z轴上的位移 |
| rotate(90deg) | 旋转指定角度（90度） |
| rotate3d(x,y,z,angle) | 前三个参数表示旋转轴的向量 ,第四个参数表示旋转的角度。 |
| scale(x,y) | 将元素缩放 |
| scaleX(x) | 水平方向上缩放 |
| scaleY(y) | 垂直上缩放 |
| skew(x,y) | 将元素倾斜 |
| skewX(x) | 水平上倾斜 |
| skewY(y) | 垂直上倾斜 |
代码：
@keyframes xuanZhuan { 0% {/* 动画的初始状态 *//*transform: translateX(10px); transform: scale(5, 5); 注意：上面有两个 transform 属性，只有最后一个会生效 */transform: translateX(10px) scale(5, 5); /* 在 X 轴上平移 10px，并放大 5 倍 */}50% {/* 动画进行到 50% 时的状态 */transform: translateY(10px) rotate3d(1, 1, 1, 360deg); /* 在 Y 轴上平移 10px，并旋转 360 度 */}100% {/* 动画的结束状态 */transform: translate3d(5px, 10px, 5px); /* 在 3D 空间中平移 (5px, 10px, 5px) */}
}效果：
媒体1
- opacity:控制元素的透明度//这里就不演示了，上面有代码
- background-color：改变背景颜色
……
四、animation属性
-
animation-name:指定动画的名称
-
animation-duration:指定动画的持续时间，单位为秒或毫秒
-
animation-timing-function:指定动画的速度曲线，控制动画的快慢变化。
1) linear:匀速
2）ease:慢快慢（默认值）
3) ease-in:慢开始。
4) ease-out:慢结束。
5) ease-in-out:慢开始和慢结束。
6) cubic-bezier(n,n,n,n):自定义速度
- animation-direction:指定动画的播放方向。
1)normal:正向播放（默认值）
2)reverse:反向播放
3)alternate:正向和反向交替播放
4)alternate-reverse:反向和正向交替播放
- animation-play-state:指定动画的播放状态。
1)running:动画运行
2)paused:动画暂停
- animation-fill-mode:指定动画结束后的状态
1)none:恢复初态
2)forwards：保留最后一帧的状态
3)backwards:保留第一帧的状态
4)both:同时应用forwards和backwards
- animation-iteration-count:指定动画的重复次数。(infinite:无限循环）
- animation-delay:指定动画开始前的延迟时间，单位为秒或毫秒
代码:
.box1 img {width: 100px;height: 100px;border-radius: 50%;position: relative;/*animation: xuanZhuan 10s infinite linear; *//* 使用 animation 子属性 */animation-name: xuanZhuan; /* 动画名称 */animation-duration: 10s; /* 动画持续时间 */animation-timing-function: linear; /* 动画速度曲线 */animation-iteration-count: infinite; /* 动画重复次数 */
}
