First, the grammar
Transition:property Duration timing-function Delay
The Transition property is a composite property, and she includes the following sub-properties:
- Transition-property: Specifies the name of the CSS property that sets the transition effect
- Transition-duration: Specifies how many seconds or milliseconds to complete the transition effect
- Transition-timing-function: Specify the transition function, which specifies the velocity curve of the speed effect
- Transition-delay: Specify the delay time to start appearing
The default values are: all 0 ease 0
Note: The Transition-duration duration is 0 and does not produce transitions
When changing the transition effect of multiple CSS properties:
a{ Transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}
Second, sub-attributes
Transition-property:none |all |property;
When none is true, no property has a transition effect, and all properties have a transition effect when the value is all, and the value applies a transition effect to the specified CSS property, with multiple attributes separated by commas
Transition-duration:time;
This property is primarily used to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new property, commonly known as duration
- Transition-timing-function
transition-timing-function:linear| ease| ease-in| Ease-out| Ease-in-out| Cubic-bezier (N,n,n,n);
This property refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition, as explained below:
Note: The value cubic-bezier (n,n,n,n) can define its own values, such as Cubic-bezier (0.42,0,0.58,1)
Div{width:100px;Height:100px;Background-color:Orange;margin:20px Auto;Border-radius:100%;-webkit-transition-property:-webkit-border-radius;Transition-property:Border-radius;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function:ease; transition-timing-function:ease; Div .:Hover {border-radius:0px;}
I try to change different values to see the difference, but it is not obvious that the duration of the long point estimate more can be seen, but because the GIF is too big to get up, so it took 3 seconds of time.
Ease: From fast to slow to slower
Linear: Constant speed
Ease-in: Getting Faster
Ease-out: More and more slowly
Ease-in-out: Accelerate and slow down first
This property has nothing to say, that is, the delay time before the transition effect starts, in seconds or milliseconds
One more chestnut:
Div{width:200px;Height:200px;background:Red;margin:20px Auto;-webkit-transition-property:background;Transition-property:background;-webkit-transition-duration:. 5s;transition-duration:. 5s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:. 18s;Transition-delay:. 18s;}Div:hover{background:#000;}
A detailed description of the transition attribute in CSS3