Welche Eigenschaften implementieren Animationseffekte in CSS3?-CSS-Tutorial-php.cn

Welche Eigenschaften implementieren Animationseffekte in CSS3?

WBOY

Freigeben： 2021-12-15 11:17:46

Original

4385 Leute haben es durchsucht

Attribute zum Erzielen von Animationseffekten in CSS: 1. „animation“-Attribut, das in Verbindung mit der „@keyframes“-Regel verwendet werden kann, um Animationseffekte für Elemente festzulegen; 2. „transition“-Attribut, das übermäßige Animationen festlegen kann Elemente Wirkung.

Welche Eigenschaften implementieren Animationseffekte in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was sind die Attribute, um Animationseffekte in CSS3 zu erzielen?

Wenn Sie in CSS Animationseffekte erzielen möchten, können Sie das Animationsattribut und das Übergangsattribut verwenden.

1. Das Animationsattribut ist ein Kurzattribut, das zum Festlegen von sechs Animationsattributen verwendet wird. Die Syntax lautet wie folgt:

animation: name duration timing-function delay iteration-count direction;

Nach dem Login kopieren

Der Attributwert lautet wie folgt:

<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>

Nach dem Login kopieren

Ausgabe Ergebnis: Welche Eigenschaften implementieren Animationseffekte in CSS3?

2 Das Übergangsattribut ist ein abgekürztes Attribut, mit dem vier Übergangsattribute festgelegt werden. Die Syntax lautet wie folgt:

transition: property duration timing-function delay;

Nach dem Login kopieren

Der Attributwert lautet wie folgt: Welche Eigenschaften implementieren Animationseffekte in CSS3?

Das Beispiel lautet wie folgt :

<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis: Welche Eigenschaften implementieren Animationseffekte in CSS3?

(Lernvideo-Sharing:

CSS-Video-Tutorial

) Welche Eigenschaften implementieren Animationseffekte in CSS3?

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften implementieren Animationseffekte in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!