Heim > Artikel > Web-Frontend > So verwenden Sie das Attribut „animation-name“ in CSS3

So verwenden Sie das Attribut „animation-name“ in CSS3

青灯夜游Original: 2019-01-31 10:37:144261Durchsuche

Verwendung des Attributs „animation-name“ in CSS3: [animation-name: keyframename|none]. Dieses Attribut wird verwendet, um einen Namen für die @keyframes-Animation anzugeben.

CSS3-Animationsname-Eigenschaft

Funktion: Animation Das Attribut -name gibt den Namen für die @keyframes-Animation an.

Syntax:

animation-name: keyframename|none;

keyframename: Gibt den Namen des Keyframes an, der an den Selektor gebunden werden muss.

none: Gibt keinen Animationseffekt an (kann verwendet werden, um Animationen aus der Kaskade zu überschreiben).

Hinweis: Sie müssen immer das Attribut „animation-duration“ festlegen, andernfalls wird die Animation nicht abgespielt, wenn die Dauer 0 ist.

Verwendungsbeispiel des CSS3-Animationsnamenattributs

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;

/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}

@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-name 属性。</p>

<div></div>

<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>

</body>
</html>

Rendering:

So verwenden Sie das Attribut „animation-name“ in CSS3

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Attribut „animation-name“ in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css3 选择器 animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die CSS3-AnimationseigenschaftNächster Artikel：So verwenden Sie die CSS3-Animationseigenschaft

In Verbindung stehende Artikel

Mehr sehen