Sie können versuchen, den folgenden Code auszuführen, um mithilfe von CSS3 Links mit Keyframes zu animieren
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!
Der Unterschied zwischen einem offiziellen Ersatztelefon und einem brandneuen Telefon
Was tun, wenn der Computer keinen Ton hat?
Welche Datenanalysemethoden gibt es?
localhost8080 kann nicht auf die Lösung zugreifen
So öffnen Sie eine ISO-Datei
Lösung für die Erlaubnis verweigert
Einführung in den Javascript-Spezialeffektcode
So ändern Sie das Passwort in MySQL
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
