Properties and implementation methods of transition in css

The content of this article is about the properties and implementation methods of transition in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Note: IE9 and earlier IE versions do not support transition! To write the Safari traffic device, you need to add the prefix of -webkit-, etc.!

1. Transition means that when the mouse moves over a certain element, it can change from one style to another.

2. Implementation method:

1. Specify the style

.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

2. Call the style

.panel{
    -webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;

2. Specify the effect duration (the default time is zero , if not specified, it will have no effect).

3. Syntax: transition: property duration timing-function delay;

Analyze each property writing method item by item:

1. Transition-property (specify css Properties) :none (no properties will get the transition effect);all (default, all properties will get the transition effect);property (a comma-separated list of css property names that define the application of the transition effect);

2. Transition-duration (specifies the time it takes to complete the transition effect) :time (specifies the time it takes to complete the transition effect, the default is 0);

3, transition-timing-function (specifies the speed of the switching effect) : linear (specifies a transition effect that starts and ends at the same speed); ease (default, specifies a transition effect that starts slowly, then becomes faster, and then ends slowly) ;ease-in (specifies a transition effect that starts at a slow speed); ease-out (specifies a transition effect that ends at a slow speed); ease-in-out (specifies a transition effect that starts and ends at a slow speed); cubic-bezier (n,n,n,n) (Define your own value in the cubic-bezier function, the only possible values ​​are between 0-1)

4, transition-delay (specify when The switching effect will start) :time (specify the number of seconds or milliseconds to wait before the switching effect starts, the default value is 0)

Related recommendations:

background-orgin in css3 How to use (with code)

css How to use the opacity attribute to add transparency to a background image (code)

The above is the detailed content of Properties and implementation methods of transition in css. For more information, please follow other related articles on the PHP Chinese website!