| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <link rel="stylesheet" href="../css/6.animation.css">
- </head>
- <body>
- <!--
- animation
- 自执行 用于实现"关键帧"动画式的风格
- animation：name duration timing-function delay
- interation-count direction fill-mode play-state
- @keyframes被称为关键帧，用于引出一个动画{
- 开始帧（form == 0%）
- 20%
- 40%
- 60%
- 80%
- 结束帧（to ==100%）
- }
- 可以定义不同百分比的动画效果
- opacity用于引入淡入淡出的动画（0-1之间的小数）
- animation-name:第一个参数表示动画的名称/none为默认值 当为none时不引用任何动画名称；
- animation-duration:2s 动画持续的时长
- animation-timing-function 动画的类型方式
- ease：默认值 规定慢速开始，然后变快，然后慢速结束的过渡效果
- linear:匀速运动
- ease-in:表示由慢到快
- ease-out:表示由快到慢
- ease-in-out:规定以慢速开始和结束的过渡效果
- animation-delay:动画的延迟时间；
- animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
- animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
- animation-fill-mode: 用于设置动画结束后的停留点（forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上 默认值:none both:介于最后和开始之间/动画结束或开始的状态）
- animation-play-state: paused(动画已暂停)|running(动画正在播放);
- 关键帧动画必须由@keyframes来引出
- -->
- <div id="box"></div>
- </body>
- </html>
|
