So verwenden Sie das Attribut „animation-delay'.-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

So verwenden Sie das Attribut „animation-delay'.

青灯夜游

Jan 31, 2019 am 11:14 AM

css3动画

Das Attribut „animation-delay“ wird verwendet, um den Start der Animation in Sekunden oder Millisekunden zu definieren. Verwenden Sie das Attribut „animation-delay“, um den Verzögerungseffekt der Animation anzupassen.

So verwenden Sie das Attribut „animation-delay'.

CSS3-Animationsverzögerungseigenschaft

Funktion: Animation Das Attribut -delay definiert, wann die Animation startet. Der Wert für die Animationsverzögerung wird in Sekunden oder Millisekunden angegeben.

Syntax:

animation-delay: time;

Zeit: kann weggelassen werden, der Standardwert ist 0; wird verwendet, um die Wartezeit vor dem Start der Animation in Sekunden oder Millisekunden zu definieren.

Hinweis: Zeit darf ein negativer Wert sein. -2s bewirkt, dass die Animation sofort startet, überspringt jedoch 2 Sekunden, um in die Animation zu gelangen.

Hinweis: Internet Explorer 9 und frühere Versionen unterstützen das Animationsverzögerungsattribut nicht.

Verwendungsbeispiel der CSS3-Animationsverzögerungseigenschaft

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

/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Rendering:

So verwenden Sie das Attribut „animation-delay.

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-delay'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Verwandter Artikel

Wiederverwendbare Popovers, um einen kleinen Pop hinzuzufügenApr 17, 2025 am 11:02 AM

Ein Popover ist eine vorübergehende Ansicht, die oben auf einem Inhalt auf dem Bildschirm angezeigt wird, wenn ein Benutzer auf eine Steuertaste oder in einem definierten Bereich klickt. Zum Beispiel,

Styling -Links mit echten UntersteinenApr 17, 2025 am 10:57 AM

Bevor wir zu Stylen unterstreicht, sollten wir die Frage beantworten: Sollten wir unterstreichen?

Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow DomApr 17, 2025 am 10:55 AM

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Multiplayer Tic Tac Toe mit GraphQLApr 17, 2025 am 10:54 AM

GraphQL ist eine Abfragesprache für APIs, die für Front-End-Entwickler sehr befähigt. Wenn die GraphQL -Site es erklärt, beschreiben Sie Ihre Daten und fragen Sie nach was

Logische Operationen mit CSS -VariablenApr 17, 2025 am 10:44 AM

Sehr oft, während Switch -Variablen verwendet (eine Variable, die entweder 0 oder 1 ist, ein Konzept, das in diesem Beitrag ausführlich erklärt wurde), wünschte ich, ich könnte es könnte

LAZY LOAD ENTRETTE YOUTUBE VIDEOSApr 17, 2025 am 10:40 AM

Dies ist eine sehr kluge Idee über Arthur Corezan. Anstatt die Standard -YouTube -Einbettung zu verwenden, die einer Seite eine Mistladung von Ressourcen hinzufügt, unabhängig davon, ob der Benutzer abgespielt wird

Können Sie den Cursor in CSS drehen?Apr 17, 2025 am 10:28 AM

Irgendwie! Es gibt keine einfache oder Standard -Möglichkeit, es zu tun, aber es ist möglich. Sie können den Cursor in verschiedene integrierte native Versionen mit CSS mit dem ändern

Hamburger -Menü mit einer Seite von React -Hooks und gestalteten KomponentenApr 17, 2025 am 10:21 AM

Wir alle wissen, was ein Hamburgermenü ist, oder? Als sich das Muster in Web -Designs einleitete, wurde es sowohl verspottet als auch für seinen Minimalismus applaudiert

See all articles