How to use the transition transition attribute in css

This article will explain in detail how to use the transition transition attribute in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First, transition (transition) means that when you move the mouse over an element, it can change from one style to another.

Second, the realization method:

1. Specify the style

.panel: target {

Margin-top:0%

Background-color:#ffcb00

}

2. Call style

.panel {

-webkit-transition:all.8sease-in-out

-moz-transition:all.8sease-in-out

-o-transition:all.8sease-in-out

Transition:all.8sease-in-out

two。 Specifies the duration of the effect (the default time is zero, if not specified, there is no effect).

Grammar: transition:propertydurationtiming-functiondelay

Analyze each attribute writing item by item:

1. Transition-property (specify css attribute): none (no attribute will get transition effect); all (default, all attributes will get transition effect); property (define a comma-separated list of css attribute names to which the transition effect is applied)

2. Transition-duration (specify the time it takes to complete the transition effect): time (specify the time it takes to complete the transition effect. Default is 0)

3. Transition-timing-function (specify the speed of the switching effect): linear (specify the transition effect from beginning to end at the same speed); ease (default, the transition effect that starts slowly and then becomes faster and then ends slowly); ease-in (transition effect that starts slowly); ease-out (transition effect that specifies the transition effect that ends at a slow speed); ease-in-out (the transition effect that specifies the transition effect that starts and ends at a slow speed) Cubic-bezier (n _ journal _ n _ n) (define your own value in the cubic-bezier function, only a value between 0 and 1 is possible)

4. Transition-delay (specify when the switching effect will start): time (wait for the switching effect to start before you specify the number of seconds or milliseconds. Default is 0)

On "transition transition attributes in css how to use" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.