Einführung in die Übergangsfunktion der CSS3-Animationsfunktion

Wenn Sie in CSS3 die Animationsfunktion verwenden, können Sie den Text oder die Bilder auf der Seite animieren und dafür sorgen, dass die Hintergrundfarbe reibungslos von einer Farbe zur anderen übergeht.

Die Animationsfunktion in CSS3 ist in die Übergangsfunktion und die Animationsfunktion unterteilt. Beide Funktionen können Animationseffekte erzeugen, indem sie die Attributwerte in CSS ändern.
Bisher unterstützt die Funktion „Übergänge“ einen reibungslosen Übergang von einem Attributwert zu einem anderen, und die Funktion „Animationen“ unterstützt die Angabe von Schlüsselbildern, um komplexere Animationseffekte auf der Seite zu erzeugen.

Übergangsfunktion

浏览器	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, das einen Attributwert reibungslos übergeht:

Online-Demonstration (Mouse over , Änderungen der Hintergrundfarbe)

<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 für reibungslosen Übergang mehrerer Attributwerte:

Online-Demonstration (Mausdurchgänge, Hintergrundfarbe, Schriftfarbe, Breitenänderungen)

<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 (kombinierte Nutzung der Übergangsanimationsfunktion):

Maus über das Bild bewegen, zuerst 30 Pixel nach rechts bewegen und dann um 180 Grad drehen;

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

Analyse:
Der Nachteil der Verwendung der Transitions-Funktion zum Implementieren von Animationen besteht darin, dass Sie nur den Startwert und den Endwert des Attributs angeben und diese dann erreichen können ein reibungsloser Übergang zwischen diesen beiden Attributen, der nicht erreicht werden kann. Komplexere Animationseffekte.
Um jedoch Animationseffekte zu erzielen, können durch Angabe von Schlüsselbildern komplexe Animationseffekte auf der Seite erzeugt werden.

Wenn Sie in CSS3 die Animationsfunktion verwenden, können Sie den Text oder die Bilder auf der Seite animieren und dafür sorgen, dass die Hintergrundfarbe reibungslos von einer Farbe zur anderen übergeht.
Die Animationsfunktion in CSS3 ist in die Übergangsfunktion und die Animationsfunktion unterteilt. Beide Funktionen können Animationseffekte erzeugen, indem sie die Attributwerte in CSS ändern.
Bisher unterstützt die Funktion „Übergänge“ einen reibungslosen Übergang von einem Attributwert zu einem anderen, und die Funktion „Animationen“ unterstützt die Produktion komplexerer Animationseffekte auf der Seite durch Angabe von Schlüsselbildern.

Übergangsfunktion

浏览器	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, das einen Attributwert reibungslos übergeht:

Online-Demonstration (Mouse over , Änderungen der Hintergrundfarbe)

<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 für reibungslosen Übergang mehrerer Attributwerte:

Online-Demonstration (Mausdurchgänge, Hintergrundfarbe, Schriftfarbe, Breitenänderungen)

<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 (kombinierte Nutzung der Übergangsanimationsfunktion):

Maus über das Bild bewegen, zuerst 30 Pixel nach rechts bewegen und dann um 180 Grad drehen;

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

Analyse:
Der Nachteil der Verwendung der Transitions-Funktion zum Implementieren von Animationen besteht darin, dass Sie nur den Startwert und den Endwert des Attributs angeben und diese dann erreichen können ein reibungsloser Übergang zwischen diesen beiden Attributen, der nicht erreicht werden kann. Komplexere Animationseffekte.
Um jedoch Animationseffekte zu erzielen, können durch Angabe von Schlüsselbildern komplexe Animationseffekte auf der Seite erzeugt werden.

Das obige ist der detaillierte Inhalt vonEinführung in die Übergangsfunktion der CSS3-Animationsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!