### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2019-12-25
目录

# CSS3之animation动画

# # CSS3之animation动画

> 可用`F12`开发者工具查看元素及样式，可打开codepen在线编辑代码。

    <html>
      <div class="animationBox">
        <div class="rotate">旋转动画1</div>
        <div class="play">
          <div class="img">旋转动画2</div>
          <span><p class="p2"></p></span>
          <span><p></p></span>
          <span><p></p></span>
          <span><p class="p2"></p></span>
        </div>
        <div class="elasticity">弹性动画</div>
        <div class="elasticity2">曲线弹性</div>
      </div>
    </html>

    <style>
      .animationBox{overflow: hidden;}
      .animationBox>div{
        width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
      }
      .rotate{
        animation: rotate 5s linear infinite
      }
      .rotate:hover{ animation-play-state: paused}
      @keyframes rotate {
        0%{transform: rotate(0);}
      100%{transform: rotate(360deg);}
      }
      .animationBox>.play {
        position: relative;
        margin: 50px 30px;
        background:none;
      }
      .play .img{
        position: absolute;
        top: 0;
        left:0;
        z-index: 1;
        width: 100px;height: 100px; background: #eee;
        border-radius: 50%;

        animation: rotate 5s linear infinite
      }
      .play span {
        position: absolute;
        top: 1px;
        left:1px;
        z-index: 0;
        display: block;
        width: 96px;
        height: 96px;
        border: 1px solid #999;
        border-radius: 50%;
      }
      .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
      .play span .p2{margin: 50% 0 0 -2px;}
      .play span{
        animation: wave 5s linear infinite
      }
      .play>span:nth-child(3){
        /* 延迟时间 */
        animation-delay:1s;
      }
      .play>span:nth-child(4){
        animation-delay:2.2s;
      }
      .play>span:nth-child(5){
        animation-delay:3.8s;
      }

      @keyframes wave {
        0%
        {
          transform:scale(1) rotate(360deg);
          opacity: 0.8;
        }
      100%
        {
          transform:scale(1.8) rotate(0deg);
          opacity: 0;
        }
      }

      .elasticity{
        /* 参数说明
          动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite  是否反向播放动画
        */
        animation: elasticity 1s linear 2s infinite
      }

      @keyframes elasticity{
        0%{
          transform: scale(0);
        }
        60%{
          transform: scale(1.1);
        }
        90%{
          transform: scale(1);
        }
      }

      .elasticity2{
        /**
        贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

        通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
        X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
        直线：linear，即cubic-bezier(0,0,1,1)

        贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
          */
        animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
      }
      @keyframes elasticity2{
        0%{
          transform: scale(0);
        }
        90%{
          transform: scale(1);
        }
      }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

### # 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。 如：直线linear，即cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
(opens new window)

> 参考：https://www.w3school.com.cn/css3/index.asp
> (opens new window)

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
CSS3之transition过渡
「布局技巧」图片未加载前自动撑开元素高度

← CSS3之transition过渡 「布局技巧」图片未加载前自动撑开元素高度→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式