Transition is one of the disruptive features of CSS3. We can add effects to elements as they transform from one style to another without using Flash animations or JavaScript.
Transition animation: a gradual transition from one state to another
This will make our pages look and feel more dynamic and will not affect the layout of the page, although it is not supported in the lower versions of the browser (ie9 below).
We now often use it with :hover.
1. Grammar format:
Transition: The attribute to be transitioned takes time when the motion curve begins;Copy the code| attribute | describe | CSS |
|---|---|---|
| transition | Shorthand property, used to set four transition properties in a property. | 3 |
| transition-property | Specifies the name of the CSS property that applies the transition. | 3 |
| transition-duration | Define how long the transition effect takes. The default is 0. | 3 |
| transition-timing-function | A time curve specifying transition effects. The default is “ease”. | 3 |
| transition-delay | Specify when the transition effect begins. The default is 0. | 3 |
2. The attribute
Properties are the CSS properties that you want to change, width, height, background color, inside and outside margins. If you want all properties to transition, you can write all.
3. Take your time
Transition-duration Duration is seconds (must be written) s ms for example, 0.5s the s unit must be written ms ms
4. The exercise curve defaults to Ease
Schematic diagram of motion curve:
5. When to start
The default value is 0s when the mouse is triggered, the triggering time can be set
Case study:
div { width: 200px; height: 100px; background-color: pink; /* Transition: The attribute to be transitioned takes time when the motion curve begins; */ Transition: width 0.3s ease 0s, height 0.3s ease-in 1s; Hover {/* hover {/* hover {/* hover {/* hover {/* hover {/* hover {/* hover; Height: 300px} transition: all 0.6s; /* All attributes can be changed by using allCopy the codeThe transition: all 0.5 s;
6. Common effects:
Button change background picture moving millet effect (shadow effect) transfer wisdom navigation bar effect and so on