How to use the transition attribute: transition:property duration timing-function;
The property indicates which property is to be smoothly transitioned, and the duration indicates how long it takes to complete the property. Smooth transition of values, timing-function indicates the method by which smooth transition is performed.
Multiple smooth transition examples:
1 2 3 4 5 6 7测试 8 9 10 11 29 30
Usage examples:
1 2 3 4 5 6 7测试 8 9 10 11 35 36
Method to implement animation:
Method | Change speed of attribute value |
linear | Change at the same speed at the beginning and end of the animation |
ease-in | At the beginning of the animation The speed is very slow, and then the speed increases along the curve value |
ease-out | The animation starts very fast, and then the speed slows down along the curve value |
ease | The animation starts very slowly, then speeds up along the curve value, and then slows down along the curve value |
ease-in-out | The animation starts very slowly, then speeds up along the curve value, and then slows down along the curve value |
The above is the detailed content of How to use the transition function in CSS3?. For more information, please follow other related articles on the PHP Chinese website!