This is the 20th day of my participation in the August More Text Challenge

CSS3 added the transition effect attribute for an element: Transition

Transition is also a compound property with four values:

1. transition-property

2. transition-duration

3. transition-timing-function

4. transition-delay

The basic usage is as follows:

  1. Transition-property sets the properties to be transitioned

The default value is all. All properties of an object are changed by a transition effect

You can also set a separate property transition-property:width;

It can also be set to None to indicate that no transition is specified

  1. Transition-duration Indicates the time spent in transition

The default value is 0. Indicates that the transition time is completed instantly

You can also set the number of seconds or milliseconds

  1. Transition-timing -function Timing is a timing function. So this transition-timing-function represents the transition animation type. The default value iseaseIs smooth transition. Is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0), in addition to several values:

  • You don’t have a linear transition. Equivalent to bezier curve (0.0, 0.0, 1.0, 1.0)

  • Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)

  • Ease-out: from fast to slow. Equivalent to bezier curve (0, 0, 0.58, 1.0)

  • Ease-in-out: from slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)

  • Step-start: equivalent to steps(1, start)

  • Step-end: equivalent to steps(1, end)

Note:

steps(<integer>[, [ start | end ] ]?) :

A step function that takes two arguments. The first argument must be a positive integer, specifying the number of steps of the function. The second parameter, which can be start or end, specifies the point at which the value of each step changes. The second argument is optional and defaults to end. Cubic – Bezier (,,,) : specific Type of Bezier curve, 4 values must be within the interval [0, 1]

  1. transition-delay

Represents the delay time, how many milliseconds or seconds can be set

Multiple properties can be set separately or together using Transition

For example, when you click the button, the square width changes from 100px to 200px, the delay is 1s, the transition time takes 2s, and the speed is one set by Cubic bezier

<head>
    <style>
        div {
            transition: all 2s cubic-bezier(0.075.0.82.0.165.1) 1s;
            width: 100px;
            height: 100px;
            background-color: #f42
        }
    </style>
</head>
<body>
    <div></div>
    <button>Am I</button>
</body>
<script>
    var odiv = document.getElementsByTagName('div') [0];
    var btn = document.getElementsByTagName('button') [0];
    btn.addEventListener('click'.function () {
            odiv.style.width = '200px';
            console.log("clicked!!")},false);
</script>
Copy the code

And that’s the basic transition!