Introduction to the new transition attribute in css3 (with examples)

This article brings you an introduction to the new transition attribute in CSS3 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A new module transition has been added in CSS3, which can trigger changes in the appearance of elements through some simple CSS events, making the effect more delicate.
It is a composite attribute, mainly including the following sub-attributes.

transition-property: Specify the CSS property of transition or dynamic simulation
transition-duration: Specify the time required to complete the transition
transition-timing-function: Specify the transition function
transition-delay :Specify the delay time for the start of appearance

For example:

transition: background-color .5s ease .1s;

Special note: When the "transition-property" attribute is set to all, it represents the properties of all midpoint values.

Example:

width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -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;

You can also set individual properties.

Related recommendations:

CSS3 transition property_html/css_WEB-ITnose

##Detailed explanation and example sharing of Transition property in CSS3 _CSS/HTML

The above is the detailed content of Introduction to the new transition attribute in css3 (with examples). For more information, please follow other related articles on the PHP Chinese website!