基础知识

默认情况下，属性的变化是在瞬间完成（也是存在时间变化的，只是在毫秒级，人的眼睛无法察觉到），本章节学习css过渡的控制

动画属性

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

css

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

    body {
        background: #2c3e50;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 80px;
    }

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

    div {
        width: 150px;
        height: 150px;
        background-color: #fff;
        border: solid 20px #ddd;
        transition: 2s;
    }

    div:hover {
        border-radius: 50%;
        border: dotted 60px #ddd;
        background-color: #e67e22;
    }
</style>

<main>
	<div></div>
</main>

元素状态

初始形态

css

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

    body {
        background: #2c3e50;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 20px;
    }

    input {
        border: solid 5px #e67e22;
        height: 60px;
        width: 100%;
        margin-bottom: 20px;
    }

    input:checked {
        position: relative;
        width: 60px;
        height: 60;
        border: none;
    }

    input:checked::before {
        content: '⩗';
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3em;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        background: #3498db;
    }
</style>

<input type="text">
<input type="checkbox" checked>

变化形态

指的是元素从初始形态到变化形态，比如鼠标移入后元素发生了变化。

css

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

    body {
        background: #2c3e50;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
         padding: 20px;
    }

    input {
        border: solid 5px #e67e22;
        height: 60px;
        width: 100%;
        margin-bottom: 20px;
        transition: 2s;
    }

    input:hover {
        border: solid 5px #000 !important;
    }

    input:focus {
        background: #e67e22;
    }

    input:checked {
        position: relative;
        width: 60px;
        height: 60;
        border: none;
    }

    input:checked::before {
        content: '⩗';
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3em;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        background: #3498db;
    }
</style>

<input type="text">
<input type="checkbox" checked>

transition-property

用于设置哪些属性应用过渡效果。

默认值为all 即所有属性都发生过渡效果
多个属性使用逗号分隔

css

  transition-property: background-color, transform, opacity, border-radius;

transitionend

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

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

Transition-timing-function

用于设置过渡效果的速度

默认参数

值	说明
linear	规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)
ease	开始慢，然后快，满下载结束时非常慢(cubic-bezier(0,25,0,1,0.25,1))
ease-in	开始慢，结束快（cubic-bezier(9.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函数中定义自己的值

贝塞尔曲线

需要设置四个值cubic-bezier(x1,y1,x2,y2)来控制曲线速度。

步进速度

过渡使用阶梯化呈现，有点像机械舞。

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

css

 transition-timing-function: steps(4, start);

transition-delay

用于设置延迟过渡的时间。

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

css

transition-delay:2s

多值延迟

css

transition-duration: 1s, 2s, 3s;
transition-delay: 1s, 3s, 5s;

使用负值

css

transition-duration: 1s, 2s, 4s;
transition-delay: 1s, 2s, -4s;

transition

可以使用transition指令将过渡规则统一设置，需要注意以下几点

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

css

transition: border-raduis linear 2s 0s, background 2s 2s, width linear 2s 4s height linear 2s 4s

html

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<style>
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ecf0f1;
    }

    div {
        position: relative;
        width: 100px;
        height: 100px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div i.fa {
        font-size: 100px;
        position: absolute;
        transition: all .5s;
        color: #ddd;
    }

    div.heart i.fa {
        font-size: 400px;
        color: #e74c3c;
        opacity: 0;
    }

    div.heart i.fa:nth-child(2) {
        font-size: 80px;
        color: #e74c3c;
        opacity: 1;
    }
</style>

<body>
    <div onclick="heart()">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
    </div>
    <script>
        function heart() {
            $("div").toggleClass('heart');
        }
    </script>
</body>

基础知识 ​

动画属性 ​

元素状态 ​

变化形态 ​

transition-property ​

transitionend ​

Transition-timing-function ​

默认参数 ​

贝塞尔曲线 ​

步进速度 ​

transition-delay ​

多值延迟 ​

使用负值 ​

transition ​