一、使用规则
- @keyframes
用于定义动画的关键帧。
- animation属性
用于将@keyframes动画用于元素上。
二、基本语法
- @keyframes
css
@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
css
.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秒内淡入淡出，无限循环*/
}完整代码：
css
<!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) | 垂直上倾斜 |
代码：
css
@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:指定动画的速度曲线，控制动画的快慢变化。
- linear:匀速
2）ease:慢快慢（默认值）
-
ease-in:慢开始。
-
ease-out:慢结束。
-
ease-in-out:慢开始和慢结束。
-
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:指定动画开始前的延迟时间，单位为秒或毫秒
代码:
css
.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; /* 动画重复次数 */
}