CSS动画
动画定义
@keyframes 动画名称{
from {
}
to{
}
}
@keyframes 动画名称{
10% {
}
20%{
}
...
100%{
}
}
动画应用
-
animation-name 动画名称
-
animation-duration 动画持续时间
-
animation-timing-function 动画时间曲线
- linear 线性增长
- steps 步子函数
- ease 默认值
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 先慢后快再慢
-
animation-delay 动画延迟时间
-
animation-direction 动画运动方向
- reverse 反转
- alternate 交替
-
animation-fill-mode 动画结束后保留哪个样式
- forwards 保留最后一帧的样式
- backwards 保留第一帧的样式
-
animation-iteration-count 动画播放次数
- 4
- infinite 无限循环
-
animation-play-state 动画播放状态
- running 播放
- paused 暂停
-
速写：
animation: 4s linear 0s infinite alternate move_eye
第三方动画库（animate.css）
封装了css3的通用的动画样式，专业
https://daneden.github.io/animate.css/
1. 引入动画库
2. 为元素添加class
呼吸灯案例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>呼吸灯</title>
<style>
div{
box-sizing: border-box;
}
.container{
width: 300px;
height: 500px;
background-color: black;
}
.box{
height: 300px;
padding:30px;
animation-name: x;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.waiquan{
height: 100%;
border-radius:50%;
border:10px solid red;
padding:20px;
animation-name: y;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.neiquan{
height: 100%;
border-radius: 50%;
border:20px solid #fff;
}
@keyframes x{
25%{
padding:20px;
}
50%{
padding:30px;
}
75%{
padding:30px;
}
}
@keyframes y{
25%{
padding:30px;
}
50%{
padding:20px;
}
75%{
padding:35px;
}
100%{
padding:20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="waiquan">
<div class="neiquan"></div>
</div>
</div>
</div>
</body>
</html>
思维导图
