Heim >Web-Frontend >CSS-Tutorial >Bewegen Sie die Animation mithilfe von CSS3 mit Keyframes nach links
Bewegen Sie die Animation mithilfe von CSS3 mit Keyframes nach links
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBnach vorne
- 2023-08-28 12:13:02687Durchsuche
Sie können versuchen, den folgenden Code auszuführen, um mithilfe von CSS3 Links mit Keyframes zu animieren
Beispiel
Live-Demo
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>Das obige ist der detaillierte Inhalt vonBewegen Sie die Animation mithilfe von CSS3 mit Keyframes nach links. 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：Wie füge ich mit jQuery CSS-Klassen zu Elementen hinzu und entferne sie?Nächster Artikel：Wie füge ich mit jQuery CSS-Klassen zu Elementen hinzu und entferne sie?