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

Programmer Help

Use of transition in CSS (to achieve transition effect)

Hot Tags