[业余难点整理] xxx-timing-function 过渡效果

3. 关于 Animation-timing-function 下列说法正确的是

• linear是默认动画，动画从头到尾的速度是相同的
• ease是默认动画，动画以低速开始，然后加快，在结束前变慢
• cubic-bezier (n, n, n, n)，在cubic-bezier函数中自己的值。可能的值是从0到100的数值
• ease-in 动画以低速结束

解析：过渡效果的默认值都为 ease，慢 — 快 — 慢

CSS3 transition-timing-function 属性

• 指定切换效果的速度 菜鸟教程测试

<style>
    div {
        width: 100px;
        height: 50px;
        background-color: red;
        transition: width 2s;
        transition-timing-function: ease;
        -webkit-transition: width 2s; /* Safari */
        -webkit-transition-timing-function: ease; /* Safari */
    }
    div:hover {
        width: 300px;
    }
</style>
<div></div>

CSS3 animation-timing-function 属性

• 指定动画将如何完成一个周期 菜鸟教程测试

<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        animation: mymove 5s infinite;
        animation-timing-function: linear;
        /* Safari and Chrome */
        -webkit-animation: mymove 5s infinite;
        -webkit-animation-timing-function: linear;
    }
    @keyframes mymove {
        from { left: 0px; }
        to { left: 200px; }
    }
    @-webkit-keyframes mymove { /* Safari and Chrome */
        from { left: 0px; }
        to { left: 200px; }
    }
</style>
<div></div>

xxx-timing-function 属性值

• ease：默认值，动画以低速开始，然后加快，在结束前变慢

• linear：动画从头到尾的速度相同

• ease-in：动画以低速开始

• ease-out：动画以低速结束

• ease-in-out：动画以低速开始和结束

• cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值，可能的值是从 0 到 1 的数值

• 【animation-timing-function 属性】steps(int,start|end)：指定了时间函数中的间隔数量（步长）

  • 第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）

  • 第二个参数可选，表示动画是从时间段的开头连续还是末尾连续

    • start：表示直接开始

    • end：默认值，表示戛然而止