1, the preface

Transition is a smooth animation that essentially moves the state of a property from an initial value to an end value in a certain amount of time. If you do not add the transition, clicking the mouse on a web page and gaining focus will cause the CSS values to be completed in an instant, which will look hard.

In the use of the use of the browser prefix:

  • -webkit-transition
  • -moz-transition
  • -o-transition

Transition is a compound property that includes:

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

  • Transition-property: transition-property (default: all)
  • Transition-duration: transition duration (default: 0s)
  • Transition-timing-function: transition function (default ease function)
  • Transition-delay Specifies the transition delay (default value: 0s).

2. Transition properties

2.1 Transition Property Transition-Property

transition-property: none | all | <transition-property>[,<transition-property>]*


Default value: all

* indicates zero or more times, which means that transition-property can be followed by multiple properties separated by commas. If multiple attributes are transitioned, you can use all instead of all attribute names to indicate that all attributes are transitioned.

2.2 Transition-duration

transition-duration:<time>[,<time>]*


Default value :0s, indicating immediate change.

The time it takes to complete the transition. The unit can be specified in seconds or milliseconds.

With transition-property and transition-duration in mind, let’s look at a simple example: this example uses hover with the background color coded red from # 69C and a transition time of 3s.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> 400px; height: 400px; background-color: #69c; margin: 0 auto; -webkit-transition: background-color 3s; } #block:hover{ background-color: red; } </style> </head> <body> <div id="block"></div> </body> </html>Copy the code

The transition effect of the page is as follows:

2.3 Transition-delay

transition-delay:<time>[,<time>]*


Default value :0s, indicating no delay

Delay the start of the transition. It can be positive or negative. If it is a positive number of seconds, it indicates that the transition starts after a positive number of seconds. For negative numbers, see this article.

In the following example, the transition time is set to 1s, and the transition delay time is set to 3s. It can be seen that the background color starts to transition after the mouse moves up and away for 3 seconds, and the transition time is 1s.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> 200px; height: 200px; background-color: #69c; margin: 0 auto; -webkit-transition: background-color 1s 3s; } #block:hover{ background-color: red; } </style> </head> <body> <div id="block"></div> </body> </html>Copy the code

When the hover transition is complete, the default is restored to the original state. Here’s a trick. If you don’t want to return to the original state, you can set the transition-delay value to very high. In the example, this value is set to 999999s, which is about 12 days. The transition can therefore be considered irreversible, that is, permanent.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="forever"></div> </body> </html> <style> .forever{ width: 100px; height: 100px; margin: 0 auto; background-color: deeppink; transition: all 1s linear 999999s; } .forever:hover{ transform: scale(2); transition: all 1s ease-in-out; } </style>Copy the code

From the example above, you can get the final effect. When the mouse hover ends, the image remains at its enlarged size. The reason for this is that the transition delay for returning to full size is set so large that the user’s browser window cannot remain closed forever. The reality is that the transition is permanent.

2.4 Transition-timing-function

transition-timing-function:<timing-function>[,<timing-function>]*


Default value: ease


Optional value: ease/linear/ease – in/ease – out/ease – in-out

  • Ease begins and ends slowly (default)
  • Ease-in Start slowly
  • Ease-out ends slowly
  • Ease -in-out Start or end slowly
  • Linear uniform

The change curves of the above four parameters can be expressed as follows:

The actual effect is shown below, with animations corresponding to ease, ease-in, ease-out, ease-in-out, and Linear in sequence:

  • Cubic – Bezier curve. The four values (x1,y1,x2,y2) correspond to points P1 and P2 on the curve and must be within the region [0,1] otherwise invalid.

  • Steps supports two parameters, the first is the number of splits, and the second is optional keywords start and end (default). For example, steps(4, start) is equivalent to step-start(4) and steps(4,end) is equivalent to step-end(4)

The two transition time functions of Cubic – Bezier and STEPS will be discussed in detail in the following articles.

3. The way of transition trigger

Generally, there are three triggering methods of transition, namely, pseudo class triggering, media query triggering @media and Javascript event triggering. Among them, common pseudo class trigger :hover, :focus, :active, :checked and so on.

1. Hover: mouse hover trigger. Examples are given at the top of the article. 2. Active: Triggered when the user clicks on an element and holds down the mouse

 <div class="active-demo"></div>Copy the code
 .active-demo{
        display: block;
        width: 100px;
        height: 100px;
        margin-top: 10px;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
        background-color: deeppink;
        transition: all 3s ease;
    }
.active-demo:active{
    background-color: blue;
    width: 500px;
}Copy the code

The page looks like this:



3. Focus (triggered when you gain focus)

<div class="wrapper"> <input type="text" class="input-demo" placeholder=" when I have focus, the edge length "> </div>Copy the code
input{ outline: none; } .wrapper{ position: relative; width: 500px; height: 50px; padding: 5px; background-color: #f0f3f9; } .input-demo{ position: absolute; right: 0; width: 200px; height: 34px; padding: 6px 12px; font-size: 14px; The line - height: 1.4; color: #555; background-color: #fff; border-image: none; border: 2px solid blue; border-radius: 4px; transition: width 3s linear; } .input-demo:focus{ width: 400px; border-image: none; border: 2px solid gold; }Copy the code

We can simulate the effect of the search box at the top of the SegmentFault by absolutely positioning the input and changing its width at focus. The effect is as follows:

4.checked:

<div class="wrapper"> <input type="checkbox" class="checkbox" id="checkbox"> <label class="label" For ="checkbox"> checkbox </label> </div>. Checkbox {transition: all 3s ease; } .label{ color: #1b1b1b; transition: all 3s ease; } .checkbox:checked + .label{ color: deeppink; font-size: 20px; font-weight: 700; }Copy the code

In this example, when passing checked, change the size and color of the label label font. The effect is as follows:

5. Click events, such as add or delete

 <div class="box">click</div>Copy the code
.box{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: deeppink;
    transition: all 3s ease;
}
.box.clicked{
    width: 200px;
    height: 200px;
    background-color: blue;
}Copy the code
$(".box").click(function () {
    $(this).toggleClass('clicked');
})Copy the code

In this example, change the background color and size of the container when clicking the mouse. The renderings are as follows:

6. Resize the browser window to trigger @media
<div class="media">media</div>Copy the code
.media { margin-top: 10px; width: 200px; height: 200px; border-radius: 5px; background: deeppink; color: white; text-align: center; transition: all 1s ease; } @media only screen and (max-width : 960px) { .media { width: 100px; height: 100px; }}Copy the code

This example tweaks the width and height of the media container by changing the size of the browser window.

4, Transition ends the event

Since transitions involve a transition time, the TransitionEnd event is raised when the transition is complete. Compatible with Chrome, Firefox, Safari, and IE10+. Specific usage is as follows:

element.addEventListener(‘transitionend’, callback, false);

html

<div id="end" class="end">transitionEnd</div>Copy the code

css

 .end{
        width: 120px;
        height: 120px;
        background-color: deeppink;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        transition: all 3s ease;
    }
    .end:hover{
        width: 200px;
        height: 200px;
        background-color: blue;
    }Copy the code

javacript

  document.getElementById('end').addEventListener("transitionend", function (e) {
        e = e || event;
        document.getElementById('end').innerHTML = 'propertyName:'  + e.propertyName
            + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
    });Copy the code

The effect is as follows:

However, the transitionEnd event is quite bad, and the transition properties obtained by e.propertyName are incomplete. For example, the transition properties in this example include width, height, and background-color. But the transition property obtained by e.propertyName is only height.

Write at the end

That’s it for the transition properties, but there are a lot of details that haven’t been covered, and you can check out the W3C. Believe that at this point, you can write a user friendly transition effect. Thank you for reading! In such a impetuous age, can seriously see here is the biggest affirmation of the author. Welcome to follow my wechat public account. Christmas, wish you and your family all the best!