CSS的动画
在本节，我们将学习keyframes动画。
1. 动画的基本使用
1. 定义动画
定义动画有两种写法：
-
简单定义方式
@keyframes 动画名 { /* from代表初始状态 */ from { /*property1:value1*/ transform: translate(0%); } /* to代表结束状态 */ to { transform: translate(200%); } } -
完整定义方式
@keyframes 动画名 { /* 使用百分比来控制动画进程 */ 25% { /*property1:value1*/ transform: translateX(50%); } 50% { transform: translateY(100%); } 75% { transform: translateX(150%); } 100% { transform: translateY(200%); } }
1.2 元素应用动画
给元素添加animation属性，一般常用有三个属性：
- name 定义的动画名称
- time 动画持续时间
- liner 动画算法，infinite是动画无限循环
#box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 0;
top: 100px;
/* name你定义的动画名称 time动画持续时间 liner动画算法 infinite动画无限循环*/
animation: trans-auto 2s linear infinite;
}
1.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>
#box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 100px;
/* name定义的动画名称 time动画持续时间 liner动画算法 infinite动画无限循环*/
animation: trans-auto 2s linear infinite;
}
@keyframes trans-auto {
/* from代表初始状态 */
from {
transform: translate(0%);
}
/* to代表结束状态 */
to {
transform: translate(200%);
}
}
</style>
</head>
<body>
<!-- 用@keyframes来做过渡效果 自动动画 无需触发 -->
<div id="box"></div>
</body>
</html>
1.4 演示效果
我们可以看到粉色的方块进行无线地平滑运动。
2. 动画的其他属性
2.1 animation-timing-function
设置动画的类型，常用的值如下：
- ease ： 平滑动画（默认）
- linear ： 动画线性过渡
- ease-in ： 从慢到快
- ease-out ：从快到慢
- ease-in-out ：先慢再快后慢
- step-start ： 等同于 steps(1, start)
- step-end ： 等同于 steps(1, end)
- cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型
制作贝塞尔曲线的网页https://cubic-bezier.com/#.17,.67,.83,.67
2.2 animation-iteration-count
指定动画的播放次数 ，有两个值：
- number ：动画循环次数
- infinite ： 无限循环
其他属性可以去MDN查看：https://developer.mozilla.org/zh-CN/docs/Web
