| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <!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>
- #box1 {
- width: 200px;
- height: 200px;
- background: #f00;
- margin: 100px auto;
- animation: fun 3s linear 2s infinite normal forwards running;
- }
- @keyframes fun {
- 0% {
- transform: scaleX(2);
- /* transform: rotate(45deg); */
- }
- 20% {
- transform: scaleX(2.5);
- /* transform: rotate(60deg); */
- }
- 50% {
- transform: scaleX(3);
- /* transform: rotate(90deg); */
- }
- 70% {
- transform: scaleY(3);
- }
- 100% {
- transform: scaleY(2);
- /* transform: rotate(-45deg); */
- }
- }
- </style>
- </head>
- <body>
- <!--
- 自执行
- 用于实现关键帧动画式的风格
- -webkit-animation：name duration tming delay interation-count direction
- 1.animation-name 用来定义一个动画的名称，transition-name相同
- 2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
- 3.animation-timing-function：动画的播放方法，transition-easing相同
- 4.animation-delay：默认值是0，用来指定元素动画的开始时间，即多久之后开始执行动画，transition-delay相同
- 5.animation-interation-count：用来指定元素动画的循环次数，其可取值number为数字，其默认值为“1”，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）[关键帧动画的单位必须是百分比]
- }
- 关键帧动画可以设置不同时段的百分比效果
- -->
- <div id="box1"></div>
- </body>
- </html>
|
