Rumah > Artikel > hujung hadapan web > Gunakan CSS untuk mencapai kesan animasi lantunan yang betul
Gunakan CSS untuk mencapai kesan animasi lantunan yang betul
- WBOYke hadapan
- 2023-08-29 08:09:081426semak imbas
Untuk menggunakan CSS untuk mencapai kesan animasi pop-masuk di sebelah kanan, anda boleh cuba menjalankan kod berikut−
#🎜🎜 #Contoh#🎜🎜 #demonstrasi masa nyata
<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceInRight"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Atas ialah kandungan terperinci Gunakan CSS untuk mencapai kesan animasi lantunan yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menggunakan pemilih CSS sebagai pencari dalam Selenium?Artikel seterusnya：Bagaimana untuk menggunakan pemilih CSS sebagai pencari dalam Selenium?