css3アニメーション機能のトランジション機能の紹介

零下一度

リリース： 2017-05-02 14:29:40

オリジナル

1509 人が閲覧しました

CSS3 では、アニメーション機能を使用すると、ページ上のテキストや画像をアニメーション化し、背景色をある色から別の色に滑らかに移行させることができます。

css3のアニメーション機能はTransition機能とAnimations機能に分かれており、どちらもCSSの属性値を変更することでアニメーション効果を生み出すことができます。
これまでのところ、トランジション機能はある属性値から別の属性値へのスムーズな移行をサポートし、アニメーション機能はキーフレームを指定することでページ上でのより複雑なアニメーション効果の生成をサポートしています。

トランジション機能

ブラウザ	Firefox 4+	Opera 10	Safari 3.1+	Chrome 8+
各ブラウザ用の書き込み	-moz-transition	-o - transition	-webkit-transition	-webkit-transition

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

ログイン後にコピー

html:

<p>示例文字</p>

ログイン後にコピー

属性値のスムーズな遷移 css:

オンラインデモ (マウスパス、背景色の変化)

<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複数の属性値を持つ:

オンラインデモ (マウスが通過すると、背景色、文字色、幅が変化します)

<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>

ログイン後にコピー

オンラインデモ (トランジションアニメーション機能を総合的に使用):

マウスが画像を通過すると、最初に右に 30 ピクセル移動し、180 度回転します。

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

ログイン後にコピー

分析:
トランジション関数を使用してアニメーションを実装する場合の欠点は、開始値と終了値しか指定できないことです。より複雑なアニメーション効果は実現できませんが、アニメーション機能を使用すると、キーフレームを指定してページ上に複雑なアニメーション効果を生成できます。

CSS3ではアニメーション機能を使うと、ページ上のテキストや画像をアニメーションさせたり、背景色を滑らかに遷移させることができます。

トランジション機能

ブラウザFirefox 4+Opera 10Safari 3.1+Chrome 8+各ブラウザ用の書き込み-moz-transition-o - transition-webkit-transition-webkit-transition

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

ログイン後にコピー

html:

<p>示例文字</p>

ログイン後にコピー

属性値のスムーズな遷移 css:

オンラインデモ (マウスパス、背景色の変化)

<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複数の属性値を持つ:

オンラインデモ(マウスが通過すると背景色、文字色、幅が変化)

<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>

ログイン後にコピー

オンラインデモ(トランジションアニメーション機能併用):

マウスが画像を通過すると、まず右に 30 ピクセル移動し、180 度回転します。

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

ログイン後にコピー

分析:

トランジション関数を使用してアニメーションを実装する場合の欠点は、開始値と終了値しか指定できないことです。より複雑なアニメーション効果は実現できませんが、アニメーション機能を使用すると、キーフレームを指定してページ上に複雑なアニメーション効果を生成できます。

以上がcss3アニメーション機能のトランジション機能の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。