Example analysis of transition attribute in CSS3-CSS Tutorial-php.cn

Example analysis of transition attribute in CSS3

黄舟

Release： 2017-10-24 10:21:50

Original

2204 people have browsed it

1. Description

1.1 Definition and usage

The transition attribute is an abbreviated attribute used to set four transition properties:

transition-property: specifies the setting of transition The name of the CSS property for the effect.

transition-duration: Specifies how many seconds or milliseconds it takes to complete the transition effect.

transition-timing-function: Specifies the speed curve of the speed effect.

transition-delay: Defines when the transition effect starts.

1.2 Syntax

transition: property duration timing-function delay;

Copy after login

1.3 transition-timing-function

1.3.1 Syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);

Copy after login

1.3.2 Description

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函数中定义自己的值。可能的值是0至1之间的数值。

Copy after login

二, example

<style>
    .transition-example{
        width: 500px;
        height: 370px;
        background: #ccc;
        padding: 10px 0;
    }
    .transition-example:hover>p{
        margin-left: 90%;
        transform: rotate(360deg);
        border-radius: 5px;
    }
    .transition-example>p{
        width: 50px;
        height: 50px;
        text-align: center;
        margin: 10px 0;
        background-color: blue;
        color: #fff;
    }
    .linear{
        transition: all 5s linear;
    }
    .ease{
        transition: all 5s ease;
    }
    .ease-in{
        transition: all 5s ease-in;
    }
    .ease-out{
        transition: all 5s ease-out;
    }
    .ease-in-out{
        transition: all 5s ease-in-out;
    }
    .cubic-bezier{
        transition: all 5s cubic-bezier(0.42,0,0.58,1);
    }
    
</style>
<p class="transition-example">
    <p class="linear">linear</p>
    <p class="ease">ease</p>
    <p class="ease-in">ease-in</p>
    <p class="ease-out">ease-out</p>
    <p class="ease-in-out">ease-in-out</p>
    <p class="cubic-bezier">cubic-bezier</p>
</p>

Copy after login

rrree

The above is the detailed content of Example analysis of transition attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!