| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- #box {
- width: 300px;
- height: 300px;
- background: #0f0;
- margin: 100px auto;
- animation: run 3s linear 2s running;
- /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
- }
- @keyframes run {
- form {
- transform: rotateZ(0deg);
- }
- 20% {
- transform: rotateZ(2deg);
- }
- 40% {
- transform: rotateZ(40deg);
- }
- 60% {
- transform: rotateZ(60deg);
- }
- 80% {
- transform: rotateZ(80deg);
- }
- to {
- transform: rotateZ(100deg);
- }
- }
- </style>
- </head>
- <body>
- <!--
- animation 动画
- 自执行 ：用于实现关键帧动画式的风格
- -webkit-animation：name duration timing-function delay iteration-count direction fill-mode play-state
- 1.animation-name 用来定义一个动画的名称，transition-name相同
- 2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
- 3.animation-timing-function：动画的播放方法，transition-easing相同
- 4.animation-delay:动画的延迟时间；
- 5.animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
- 6.animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
- 7.animation-fill-mode: 用于设置动画结束后的停留点（forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上 默认值:none both:介于最后和开始之间/动画结束或开始的状态）
- 8.animation-play-state: paused(动画已暂停)|running(动画正在播放);
- ""关键帧动画必须由@keyframes来引出""
- @keyframes 动画名称(name){
- 执行代码块（0%==from 100%==to）[关键帧动画的单位必须是百分比]
- }
- 关键帧动画可以设置不同时段的百分比效果
- transition与animation区别
- transition: 过渡平滑的动画 最多4个参数 最少1个（all）
- animation: 关键帧 最长8个参数 最少2个
- -->
- <div id="box"></div>
- </body>
- </html>
|
