梦入琼楼寒有月，行过石树冻无烟

CSS Animation

2022-04-21

CSS 中，对于实现动画或过渡等方式主要可以通过使用transition / animation来进行实现大部分交互需求：

ID DA FA
@keyframes 通过@keyframes 创建动画（原理是将一套CSS样式逐渐变化为另一套样式，通常可以通过百分比）
animation-name 为动画设置名称 keyframename、none
animation-duration 设置动画的持续时间（秒/毫秒） time
animation-timing-function 规定动画的速度曲线（速度曲线将会使得动画更加丝滑） linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier
animation-delay 设置动画何时开始（单位可以是秒或毫秒，允许负值） time
animation-iteration-count 设置动画播放次数 n、infinite
animation-direction 属性控制在奇数（reverse）、和偶数（alternate）之间播放动画 normal 、alternate
animation-play-state 设置是否运行或暂停动画 paused \ running
animation-fill-mode 设置样式在动画不播放时的应用元素 none、forwards、backwards、both、initial、inherit
none 默认值
forwards 动画结束后使用元素的结尾结束值
backwards 使用元素的起始值
both 动画将遵循向前向后规则

transform

通过使用 transform 来让单纯的上移更加的富有动画效果：

1
2
3
4
5
6
7
8
<div class="con">
    <div class="ui" height="160px">
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
        <div class="li">D3 地理与数据集合</div>
    </div>
</div>

CSS

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
@keyframes scroll {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -160px); } }
.con {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 40px;
  background: #007fff;
  border-radius: 6em;
  overflow: hidden; }

.ui {
  animation-name: scroll;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.li {
  width: 100%;
  line-height: 40px;
  vertical-align: bottom;
  color: white;
  text-align: center; }

/*# sourceMappingURL=style.css.map */

Animation and js

打字效果


通过使用 Animation 内每个阶段不同之间的动画，来配合js属性调用activeCSS属性来实现出打字效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <h1 class="h1">Hello,world!</h1>
    <script>
        const doms = document.getElementsByClassName('h1')
        function run(dom) {
            dom.className += ' active'
            setTimeout(() => {
                dom.className = 'h1'
            }, 3000)
        }
        run(doms[0])
    </script>
</div>

CSS

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
@keyframes animate-x {
  0% {
    width: 0; } }
@keyframes cursor-x {
  0% {
    border-color: #007fff; }
  50% {
    border-color: transparent; }
  100% {
    border-color: #007fff;
    border-right: 3px solid #007fff; } }
div {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #007fff; }

h1 {
  text-align: left;
  overflow: hidden;
  white-space: normal;
  width: 190px;
  border-right: 1px solid transparent; }
  h1.active {
    animation: animate-x 3s 0s steps(12) 1 forwards, cursor-x 0.4s 0s linear infinite; }

/*# sourceMappingURL=style.css.map */

这里的 steps(12)实际上将动画分为了12段，这也正符合了Hello,world的文字字数。

弹窗

HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="http://analysis-of-river-snow.gitee.io/xue-css/less/xue.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
</head>
<body>
<button onclick="show()">唤起弹窗</button>
<div class="popup">
    Hello,world
    <div class="popup__close" onclick="hide()">x</div>
</div>
<script>
    function show() {
        const popup = document.getElementsByClassName("popup")[0]
        popup.className += ' popup--isActive'
    }
    function hide() {
        const popup = document.getElementsByClassName("popup")[0]
        popup.className = "popup"
    }
</script>
</body>
</html>

CSS

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
@charset "UTF-8";
button {
  padding: 6px 20px;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #007fff;
  color: white;
  border: 0;
  border-radius: 6em;
  outline: none; }
  button:hover {
    opacity: 0.8;
    cursor: pointer; }

.popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  top: -50%;
  width: 300px;
  line-height: 200px;
  text-align: center;
  background: #007fff;
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 10px white;
  /* 当点击按钮时，调用 animate 动画 */ }
  .popup--isActive {
    animation-name: animate;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.21, 0.85, 1, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards; }
  .popup__close {
    width: 40px;
    line-height: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: #202020;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    top: 100%;
    box-shadow: 0 0 10px #888484;
    cursor: pointer; }
    .popup__close:hover {
      /* 应用线性乘法，使得看起来更加明亮或暗，如果值是 0%，则是全黑，值如 100% 则无变化。 */
      filter: brightness(1.2); }

@keyframes animate {
  0% {
    top: -100%;
    opacity: 0; }
  25% {
    top: 60%;
    opacity: 1; }
  50% {
    top: 48%;
    opacity: 1; }
  75% {
    top: 52%;
    opacity: 1; }
  100% {
    top: 50%;
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */
⬅️ Go back