CSS3 过渡

动画属性

不是所有属性都拥有过渡效果，可支持过度效果的属性

过度.gif

我们看到边框实线 -> 虚线这个状态是没有过渡效果的

transition-property

设置元素某些属性应用过渡效果

all 默认所有属性都发生过渡效果
多个属性设置使用 , 逗号分隔

过度1.gif

transitionend

用于控制过渡结束后执行的JS事件

过度2.gif

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transitionend</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background: #2c3e50;
    }
    main {
      width: 100px;
      height: 100px;
    }
    div {
      position: relative;
      width: 100px;
      height: 100px;

    }

    div::before {
      content: "Mondo";
      color: #fff;
      width: 100px;
      height: 100px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #1abc9c;
      border-radius: 10px;
      transition-duration: 2s;
    }
    div::after {
      content: "imondo.cn";
      color: #fff;
      position: absolute;
      bottom: -40px;
      transform: translateX(-1000px) skew(45deg);
      transition: .5s;
    }
    div:hover::before {
      transform: rotate(360deg);
    }
    div.move::after {
      transform: translateX(0) skew(0);
    }
  </style>
</head>
<body>
  <main>
    <div></div>
  </main>
  <script>
    document.querySelector('div').addEventListener('transitionend', function(e) {
      console.log(e)
      this.classList.add('move')
    })
  </script>
</body>
</html>

transition-duration

用于设置过渡时间，需要注意以下几点

可使用单位为 ms 毫秒、s 秒
默认值为 0s 不产生过渡效果
一个值时，所有属性使用同样的时间
二个值时，奇数属性使用第一个，偶数属性使用第二个
变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

css

transition-property: background, width, height, transform;
transition-duration: 200ms, 2s;

过度3.gif

transition-timing-function

设置过渡效果的速度，控制运行轨迹

可以参考https://cubic-bezier.com/网站体验效果

steps

步进速度，步进帧动画过渡效果；过渡使用阶梯形式呈现

选项	说明
steps(n,start)	设置n个时间点，第一时间点变化状态
steps(n,end)	设置n个时间点，第一时间点初始状态
step-start	等于steps(1,start)，可以理解为从下一步开始
step-end	等于steps(1,end)，可以理解为从当前步开始

css

transition: 60s;
transition-timing-function: steps(60, start);

步进时钟

过度4.gif

transition-delay

设置延迟过渡时间

默认为0s即立刻开始过渡
值可以为负数
变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

过度5.gif

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯CSS图片切换</title>
  <style>
    p {
      width: 150px;
      height: 150px;
      background: #2980b9;
      border-radius: 50%;
      transition-property: width, height, background, border-radius;
      transition-delay: 0ms, 2s, 4s, 6s;
      transition-duration: 2s;
    }
    p:hover {
      width: 250px;
      height: 250px;
      border-radius: 0;
      background: #16a085;
    }
  </style>
</head>
<body>
  <p></p>
</body>
</html>

transition

统一设置过渡规则

必须设置过渡时间
延迟时间放在逗号或结束前

css

transition: width linear 2s,
  height ease 2s 2s,
  background ease-in 2s 4s,
  border-radius 2s 6s;

红心点赞

过度6.gif

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>红心点赞</title>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background: #34495e;
    }
    div {
      position: relative;
      display: flex;
    }
    i.fa {
      position: absolute;
      font-size: 100px;
      transition: 1s;
      color: #95a5a6;
    }
    div.heart i.fa:nth-of-type(1) {
      transform: scale(3);
      opacity: 0;
      color: #e74c3c;
    }
    div.heart i.fa:nth-of-type(2) {
      transform: scale(1);
      opacity: 1;
      color: #e74c3c;
    }
  </style>
</head>
<body>
  <div>
    <i class="fa fa-heart"></i>
    <i class="fa fa-heart"></i>
  </div>
  <script>
    document.querySelector('div').addEventListener('click', function(){
      if (this.classList.contains('heart')) {
        this.classList.remove('heart')
      } else {
        this.classList.add('heart')
      }

    })
  </script>
</body>
</html>

CSS3 过渡 ​

动画属性 ​

transition-property ​

transitionend ​

transition-duration ​

transition-timing-function ​

steps ​

步进时钟 ​

transition-delay ​

transition ​

红心点赞 ​

CSS3 过渡

动画属性

transition-property

transitionend

transition-duration

transition-timing-function

steps

步进时钟

transition-delay

transition

红心点赞