CSS3 uses the transition property to achieve transition effects

Detailed description of properties

The purpose of the transition attribute is to make some CSS properties (such as background) appear with a smooth transition effect. It is a combined attribute that is composed of the following four attributes:

• transition-property: Sets the CSS property that applies the transition, such as background.
• transition-duration: Sets the duration of the transition effect. The default is 0.
• transition-timing-function: Set the timing curve of the transition effect. The default is "ease".
• transition-delay: Specifies when the transition effect begins. The default is 0.

Example:

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

When defining transition properties, transition-property and transition-duration are required, and the other two are optional.

transition-property and transition-duration

transition-property is used to specify the CSS properties for applying transition effects. These properties include (may not be complete):

• width
• height
• color
• background (color, image, position)
• transform (in the next post)
• border (color, width)
• position (top, bottom, left, right )
• text (size, weight, shadow, word-spacing)
• margin
• padding
• opacity
• visibility
• z-index
• all

The transition-duration property is used to set the duration of the transition effect of the specified property, which can be seconds (s) or milliseconds (ms).

transition-delay and transition-timing-function

transition-delay is used to set the time when the transition effect starts. The default value is 0 and can be seconds (s) or milliseconds (ms). If transition-delay is a negative number, it means that the transition effect starts early.

transition-timing-function is used to set the transition effects, which include:

• ease - slow at the beginning, fast in the middle, and slow at the end
• ease-in - Slow in and fast out
• ease-out - Ease-out effect, fast in and slow out.
• ease-in-out - slow start and slow end
• cubic-bezier(n,n,n,n) - Define your own values ​​in the cubic-bezier function. Possible values ​​are between 0 and 1.

Example:

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

Multiple attributes

For multiple properties, the effects of each property are separated by commas:

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

compatibility

Internet Explorer 10, Firefox, Opera, and Chrome support the transition property.

Safari supports the alternative -webkit-transition property.

Internet Explorer 9 and earlier versions do not support the transition property.

trigger

It should be noted that transition effects require previously defined properties, and transition effects are applied through triggers, such as :hover, :focus, and :active.

Summarize

The above is what I introduced to you about using the transition attribute in CSS3 to achieve transition effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!