Introduction to the Transitions function of css3 animation function

In CSS3, if you use the animation function, you can animate the text or images on the page, and make the background color smoothly transition from one color to another.

The animation function in css3 is divided into Transition function and Animations function. Both functions can produce animation effects by changing the property values ​​in css.
So far, the Transitions function supports smooth transition from one attribute value to another, and the Animations function supports the specification of key frames to produce more complex animation effects on the page.

Transitions Feature

##BrowserFirefox 4+Opera 10Safari 3.1 +Chrome 8+Writing in each browser-moz-transition-o -transition-webkit-transition-webkit-transition##

transition:property duration timing-function;property表示对哪个属性进行平滑过渡；
duration表示在多长时间内完成属性的平滑过渡；
timing-function表示通过什么方法来进行平滑过渡；

html:

<p>示例文字</p>

Smooth transition one CSS of attribute values:

Online demonstration (mouse passes, background color changes)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear;        -moz-transition: background-color 1s linear;        -o-transition: background-color 1s linear;      }
      p:hover {        background-color: blue;  /*鼠标经过背景颜色改变*/    
      }</style>

Css of smooth transition of multiple attribute values:

Online demonstration (mouse passes, background color changes) Color, font color, width change)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear,color 1s linear,width 1s linear;        -moz-transition: background-color 1s linear,color 1s linear,width 1s linear;        -o-transition: background-color 1s linear,color 1s linear,width 1s linear;      }
      p:hover {        background-color: blue; /*鼠标经过背景颜色改变*/   
        color: #fff;  /*鼠标经过字体颜色改变*/   
        width: 400px;  /*鼠标经过宽度改变*/   
      }</style>

Online demonstration (comprehensive use of transitions animation function):

When the mouse passes the picture, first move 30px to the right, and then rotate 180 degrees;

html：

<p><img src="images/03.jpg" alt="*"></p>

css：

  img {      
  position: absolute;      top: 70px;      left: 0;      -webkit-transform: rotate(0deg);      -webkit-transitions: left 1s linear, -webkit-transform 1s linear;      -moz-transform: rotate(0deg);      -moz-transitions: left 1s linear, -moz-transform 1s linear;      -o-transform: rotate(0deg);      -o-transitions: left 1s linear, -o-transform 1s linear;    }
    p:hover img{      position: absolute;      left: 30px;      -webkit-transform: rotate(180deg);      -moz-transform: rotate(180deg);      -o-transform: rotate(180deg);    }

Analysis:

The disadvantage of using the Transitions function to implement animation is that you can only specify the start value and end value of the attribute, and then use these two attributes To achieve smooth transition between them, more complex animation effects cannot be achieved;

But use the Animation function to achieve animation effects, which allows complex animation effects to be produced on the page by specifying key frames.

In CSS3, if you use the animation function, you can animate the text or images on the page, and make the background color smoothly transition from one color to another.

The animation function in css3 is divided into Transition function and Animations function. Both functions can produce animation effects by changing the attribute values ​​​​in CSS.

So far, the Transitions function supports smooth transition from one attribute value to another, and the Animations function supports the specification of key frames to produce more complex animation effects on the page.

Transitions Feature

##BrowserFirefox 4+Opera 10Safari 3.1 +Chrome 8+Writing in each browser-moz-transition-o -transition-webkit-transition-webkit-transitionhtml:

<p>示例文字</p>

Smooth transition one CSS of attribute values:

				## transition:property duration timing-function;property表示对哪个属性进行平滑过渡； duration表示在多长时间内完成属性的平滑过渡； timing-function表示通过什么方法来进行平滑过渡；

Online demonstration (mouse passes, background color changes)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear;        -moz-transition: background-color 1s linear;        -o-transition: background-color 1s linear;      }
      p:hover {        background-color: blue;  /*鼠标经过背景颜色改变*/    
      }</style>

Css of smooth transition of multiple attribute values:

Online demonstration (mouse passes, background color changes) Color, font color, width change)

<style>
      p {        background-color: pink;        -webkit-transition: background-color 1s linear,color 1s linear,width 1s linear;        -moz-transition: background-color 1s linear,color 1s linear,width 1s linear;        -o-transition: background-color 1s linear,color 1s linear,width 1s linear;      }
      p:hover {        background-color: blue; /*鼠标经过背景颜色改变*/   
        color: #fff;  /*鼠标经过字体颜色改变*/   
        width: 400px;  /*鼠标经过宽度改变*/   
      }</style>

Online demonstration (comprehensive use of transitions animation function):

When the mouse passes the picture, first move 30px to the right, and then rotate 180 degrees;

html：

<p><img src="images/03.jpg" alt="*"></p>

css：

  img {      position: absolute;      top: 70px;      left: 0;      -webkit-transform: rotate(0deg);      -webkit-transitions: left 1s linear, -webkit-transform 1s linear;      -moz-transform: rotate(0deg);      -moz-transitions: left 1s linear, -moz-transform 1s linear;      -o-transform: rotate(0deg);      -o-transitions: left 1s linear, -o-transform 1s linear;    }
    p:hover img{      position: absolute;      left: 30px;      -webkit-transform: rotate(180deg);      -moz-transform: rotate(180deg);      -o-transform: rotate(180deg);    }

Analysis:

The disadvantage of using the Transitions function to implement animation is that you can only specify the start value and end value of the attribute, and then use these two attributes To achieve smooth transition between them, more complex animation effects cannot be achieved;

But use the Animation function to achieve animation effects, which allows complex animation effects to be produced on the page by specifying key frames.

The above is the detailed content of Introduction to the Transitions function of css3 animation function. For more information, please follow other related articles on the PHP Chinese website!