Heim >Web-Frontend >CSS-Tutorial >So animieren Sie ein Füllmuster mit CSS
So animieren Sie ein Füllmuster mit CSS
- 王林nach vorne
- 2023-09-04 08:09:021422Durchsuche
Um den Füllmodus mithilfe von CSS zu animieren, verwenden Sie die Eigenschaft animation-fill-mode. Es gibt Vorwärts-, Rückwärts- und bidirektionale Werte.
Sie können versuchen, den folgenden Code auszuführen, um den Füllmodus der Animation festzulegen
Beispiel
Online-Demo
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo animieren Sie ein Füllmuster mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erste Schritte mit dem CSS Typography Title UtilityNächster Artikel：Erste Schritte mit dem CSS Typography Title Utility