过渡动画

不是所有css属性都有过渡效果，查看支持动画的CSS属性，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。

元素状态

1. 初始形态

指当页面加载后的样式状态，下面是表单设置的初始样式。

2. 变化形态

指元素由初始状态变化后的状态，比如鼠标放上、表单获得焦点后的形态。

transition-property

• 用于设置哪些属性应用过渡效果。
  • 默认值为all即所有属性都发生过渡效果
  • 多个属性使用逗号分隔
  • none禁用属性

transitionend

用于控制过渡结束后执行的JS事件，简写属性会触发多次如 border-radius 会触发四次事件，不难理解因为可以为border-bottom-left-radius 等四个属性独立设置过渡，所以就会有四次事件。

属性	说明
propertyName	结束过渡样式
elapsedTime	过渡需要的时间
pseudoElement	过渡的伪元素
isTrusted	true:用户触发，false:脚本触发

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
        background: #34495e;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main {
        width: 400px;
        height: 400px;
    }

    div {
        width: 200px;
        height: 200px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }

    div::before {
        content: 'mkimq';
        font-size: 3em;
        color: #2c3e50;
        background: #95a5a6;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10%;
        transition-duration: 2s;
        cursor: pointer;
    }

    div:hover::before {
         transition-duration: 1.5s;
				 border-radius: 50%;
				 background: #f1c40f;
         transform: rotate(360deg);
    }

    div::after {
        content: 'mkimq.com';
        text-transform: uppercase;
        position: absolute;
        bottom: -60px;
        font-size: 2em;
        color: #95a5a6;
        text-align: center;
        transform: translateX(-999px) skew(45deg);
        transition-duration: 1s;
    }

    div.move::after {
        transform: translateX(0px) skew(0deg);
    }
</style>

<main>
    <div>

    </div>
</main>
<script>
    document.querySelector('div').addEventListener('transitionend', function (e) {
        console.log(e);
        document.querySelector('div').className = 'move';
    })
</script>

transition-duration

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

transition-timing-function

用于设置过渡效果的速度，可在https://cubic-bezier.com网站在线体验效果差异。

1. 参数

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

2. 贝塞尔曲线

需要设置四个值cubic-bezier(<x1>, <y1>, <x2>, <y2>)，来控制曲线速度，可在https://cubic-bezier.com网站在线体验效果。

3. 步进速度

过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分五步完成。

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

4. 时钟效果

transition-delay

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

可以使用transition 指令将过渡规则统一设置，需要注意以下几点。 必须设置过渡时间 延迟时间放在逗号或结束前