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表示通过什么方法来进行平滑过渡；

Copy after login

html:

<p>示例文字</p>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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);    }

Copy after login

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>

Copy after login

Smooth transition one CSS of attribute values:


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

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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);    }

Copy after login

Analysis:

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!