标签：过程 形式 key ack normal tps font none fun
### 首先最重要的两个
| myfirst | 5s | linear(ease) |
2s
|
infinite(33) | alternate(normal) |
| name | duration | timing-function | delay | iteration-count | direction |
| 动画名 | 动画总时长(默认0s) | 匀速(先快后慢)(默认ease) | 开始时间(默认0s) | 循环无限次(33次)(默认1) | 倒着放(正着放)(默认正着) |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
.swiper-container.swiper2 .swiper-mask {
display: none;
background-color: rgba(0, 0, 0, .5);
position: absolute;
width: 270px;
height: 360px;
top: 0;
left: 0;
z-index: 70;
/* 用css选择器 中需要添加动画的 元素 这个当元素渲染到页面上是 会执行动画
手动控制可以通过js给元素添加animation 实现 或 添加 display:none*/
animation: getintoContainer 1s ease infinite alternate;
/* 兼容 Firefox: */
-moz-animation: getintoContainer 1s ease infinite alternate;
/* 兼容 Safari 和 Chrome: */
-webkit-animation: getintoContainer 1s ease infinite alternate;
/* 兼容 Opera: */
-o-animation: getintoContainer 1s ease infinite alternate;
}
++ @keyframes 定义动画 的过程 还有一种 from to 形式 没这个好用, 这个可以定义 动画进行到 25% 或其它进程时 进行什么动画.
-- @keyframes 定义了动画 和 动画名 让 animation 这个属性使用
@keyframes getintoContainer {
0% {
left: 15px;
top: 15px;
width: 240px;
height: 330px;
background-color: rgba(0, 0, 0, 0);
}
100% {
left: 0px;
top: 0px;
width: 270px;
height: 360px;
background-color: rgba(0, 0, 0, .5);
}
}
标签：过程 形式 key ack normal tps font none fun
原文地址：https://www.cnblogs.com/jiazhifeng/p/11294336.html
