About CSS3 using the transition attribute to achieve transition effects

The new transform attribute in CSS3 can realize the transition effect of elements during the transformation process and realize basic animation. The following article will introduce to you how CSS3 uses the transition attribute to achieve transition effects. Friends who need it can refer to this article

Detailed explanation of the attribute

The purpose of the transition attribute is Let some CSS properties (such as background) appear with a smooth transition effect. It is a merged property, which is composed of the following four properties:

• transition-property: Sets the CSS property of the application transition, such as background.

• transition-duration: Set the time spent on the transition effect. The default is 0.

• transition-timing-function: Set the time curve of the transition effect. The default is "ease".

• transition-delay: Specifies when the transition effect starts. The default is 0.

Example:

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

When defining the transition attribute, transition-property and transition-duration are required, others Two are optional.

transition-property and transition-duration

transition-property is used to specify the CSS properties that apply 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 attribute is used to set the transition effect time of the specified attribute. , 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 is 0, which is OK It is 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 effects of transition. These effects include:

• ease - slow at the beginning, fast in the middle, and slow at the end

• ease-in - fade-in effect, slow in and fast out.

• ease-out - fade-out effect, fast in and slow out.

• ease-in-out - Start slow and end slow

• cubic-bezier(n,n,n,n) - Define your own in the cubic-bezier function value. Possible values ​​are numeric values ​​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 attributes, the effects of each attribute 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 attribute.

Safari supports an alternative -webkit-transition attribute.

Internet Explorer 9 and earlier browsers do not support the transition attribute.

Trigger

It should be noted that the transition effect requires attributes that have been defined before. The transition effect is applied through triggering, such as: hover, :focus, and :active etc.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 to achieve ever-changing text shadow text-shadow effects

CSS3 animation to achieve a simple slideshow Carousel special effects

The above is the detailed content of About CSS3 using the transition attribute to achieve transition effects. For more information, please follow other related articles on the PHP Chinese website!