一、Animation 常用属性
@keyframes 装饰器
animation-name 动画名称 string
animation-duration 动画完成一次所需时间 time
animation-timing-function 动画曲线 linear ~ ease ~ ease-in ~ ease-out ~ ease-in-out ~ cubic-bezier(n,n,n,n)
animation-delay 延迟时间 time
animation-iteration-count 动画播放次数 n/infinite
animation-direction 规定动画在下一周期逆向播放 normal/alternate
animation-play-state 暂停或播放动画 paused/running //js中控制该属性
animation-fill-mode 规定动画时间之外的状态 none 默认动画结束后回归最初状态/ forwards（动画结束后应用最末状态） / backwards动画开始前应用最初状态 / both 两者都兼用
简写：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
animation: animation-name animation-duration animation-delay animation-timing-function animation-iteration-count animation-direction, animation-name2 支持多动画; //delay 可省略
eg: 动态弹框
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
@keyframes myMode {
0% {
top: -100%;
}
25% {
top: 60%;
}
50% {
top: 48%;
}
75% {
top: 52%;
}
100%{
top: 50%;
}
}
.box{
width: 200px;
height: 200px;
position: absolute;
left: 45%;
background: red;
animation: myMode 2s 1s cubic-bezier(0.25, 0.85, 1, 1) 1 forwards;
}
</style>
</head>
<body>
<div class="box">我是弹框</div>
</body>
</html>