Use of transition in CSS (to achieve transition effect)

First give < body >   And < style >   Basic code in

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
<style>
.box1 {
    width: 500px;
    height: 500px;
    background-color: yellowgreen;
}

.box1 div {
    width: 100px;
    height: 50px;
}

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
}

.box3 {
    background-color: antiquewhite;
}

.box1:hover div {

}

The effect of the basic code is shown in the figure below:

(next, box1 will be used   And   box2   For comparison, it is easy to see the difference)

  Next, let's explain   transition   Properties of:

1,transition-property   Specifies the property to perform the transition

            -  Use ',' between multiple attributes   separate

            -  If all attributes require a transition, use   all   keyword

            -  Most attributes support the transition effect. Note that the transition must be from one valid value to another

2,transition-duration   Lets you specify the duration of the transition effect

            -  Time unit:   s   second   and   ms   millisecond

The above two attributes must be given at the same time, otherwise the transition effect will not occur. An example is given below:

        We modify   CSS   Code. box2   With. box1:hover   The div code is changed to:

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
    transition-property: width, height;
    transition-duration: 2s, 1000ms;
}
    
.box1:hover div {
    width: 200px;
    height: 100px;
}

  The modified effect is:

(width   Corresponding to 2s, height   Corresponding to 1000ms)

  3,transition-timing-function   A timing function that represents a transition

            -  Specifies how the transition is performed

            -  Optional values:

                 ease   The default value is to start slowly, accelerate first and then decelerate

                 linear   Uniform motion

                 ease-in   Accelerated motion

                 ease-out   Deceleration motion

                 ease-in-out   Accelerate first   Rear deceleration

                 cubic-bezier()   To formulate the time series function (Bessel curve)

                    -  https://cubic-bezier.com , this is a website of Bezier curve. You can drag the curve yourself,

                         Get the desired results, interested partners can try

                 steps()   Step by step transition effect

                    -  The first parameter indicates the steps

                    -  Second parameter:

                         start   Perform the transition at the beginning of time

                         end   Perform transition at the end of time (default)

example:

        We modify the most basic code:

.box2 {
    background-color: aqua;
    margin-bottom: 100px;
    transition-property: margin-left;
    transition-duration: 2s;
}
.box3 {
    background-color: antiquewhite;
    transition-property: margin-left;
    transition-duration: 2s;
    transition-timing-function: linear;
}
.box1:hover div {
    margin-left: 400px;
}

The effects are as follows:

 

(rest)   ease-in , ease-out , ease-in-out ,   Not separately)

This is used   cubic-bezier()   For example, you can get very interesting results:  

(add. box3)   Transition timing function   (modified to:)

.box3 {
    transition-timing-function: cubic-bezier(.13,1.51,.82,-0.59);
}

The effects are as follows:

steps()   It is carried out step by step. We also modify. box3   Transition timing function:

.box3 {
    transition-timing-function: steps(3,start);
}

The effects are as follows:

(start   And   end   The difference is execution time, assuming transition time   Transition duration: 10s, executed in two steps   steps(2,end), it will start moving after the first five seconds. If yes   steps(2,start), it will start moving at the beginning)

  4,transition-delay:   Delay of transition effect, wait for a period of time before performing the transition

Modify CSS code:

.box3 {
    background-color: antiquewhite;
    transition-property: margin-left;
    transition-duration: 2s;
    transition-delay: 1s;
}

The effects are as follows:

  The last is the most commonly used   transition :

transition   All transition related attributes can be set at the same time. There is only one requirement. If you want to write delay, the first of the two times is duration and the second is delay time (this attribute can be abbreviated for a bunch of messy attributes mentioned earlier)

modify   CSS   code:

.box3 {
    background-color: antiquewhite;
    /* transition-property: margin-left;
    transition-duration: 2s;
    transition-delay: 1s; */
    transition: margin-left 2s 1s;
}

(the effect is the same as the previous example, so it is omitted)

Of course, you can also specify multiple attributes at the same time, corresponding to different times, or add timing functions:

.xxx{
    transition: width,height 2s,1s 1s steps(2,end);
}

Tags: css

Posted on Thu, 21 Oct 2021 02:27:23 -0400 by sn202