simplify the life

CSS3 动画 cheatsheet

Transition

实例

.box {
  height: 100px;
  width: 100px;
  background: #212121;
  transition: width 1s ease, height 2s ease 1s;
}

.box:hover {
  height: 200px;
  width: 200px;
}

参数

  • transition-property
  • transition-duration
  • transition-timing-function(可以 定制
  • transition-delay

js 触发

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .box {
      height: 100px;
      width: 100px;
      background: #212121;
      transition: width 1s ease, height 2s ease 1s;
    }

    .larger {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
  setTimeout(() => {
    document.querySelector('.box').classList.add('larger')
  }, 500)
</script>
</body>
</html>

使用注意和局限

  • 不是所有的 CSS 属性都支持 transition,完整列表 & 具体效果
  • transition 需要明确知道开始状态和结束状态的具体数值
  • transition 需要事件触发(上面例子中的 hover 或者动态添加 class),其实质是元素属性的改变,而该属性定义过 transition
  • transition 是一次性的,不能重复发生,除非一再触发
  • transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态

Animation

实例

.box {
  height: 100px;
  width: 100px;
  background: #212121;
}

@keyframes larger {
  50% {
    height: 200px;
    width: 100px;
  }

  100% {
    height: 200px; 
    width: 200px;
  }
}

.box:hover {
  /* CSS Animation 需要指定动画一个周期持续的时间,以及动画效果的名称 */
  animation: 2s larger;
}

参数

  • animation-iteration-count(动画播放次数,可以取值 1, 2, 3... 或者 infinite)
  • animation-fill-mode(动画结束,会立即从结束状态跳回到开始状态,可以取值 forwards 使之保留在结束状态)
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-direction(规定动画是否在下一周期逆向地播放。默认是 "normal"。)
  • animation-play-state(如果想让动画保持突然终止时的状态,就要使用 animation-play-state 属性。)

js 触发

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .box {
      height: 100px;
      width: 100px;
      background: #212121;
    }

    @keyframes larger {
      50% {
        height: 200px;
        width: 100px;
      }

      100% {
        height: 200px; 
        width: 200px;
      }
    }

    .larger {
      animation: 2s larger forwards;
    }
  </style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
  setTimeout(() => {
    document.querySelector('.box').classList.add('larger')
  }, 1000)
</script>
</body>
</html>

连续的动画

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .box {
      height: 100px;
      width: 100px;
      background: #212121;
      animation: 
        1s higher forwards,
        1s 1s wider forwards;
    }

    @keyframes higher {
      50% {
        height: 100px;
      }

      100% {
        height: 200px; 
      }
    }

    @keyframes wider {
      50% {
        width: 100px;
      }

      100% {
        width: 200px; 
      }
    }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

如果连续的动画是作用在同一个元素上,其实完全可以写在一个 animation 里。

posted on 2017-10-17 20:10 子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News