Rumah > Artikel > hujung hadapan web > Gunakan CSS untuk pudar dalam kesan animasi yang betul
Gunakan CSS untuk pudar dalam kesan animasi yang betul
- WBOYke hadapan
- 2023-08-26 12:05:11966semak imbas
Untuk mencapai kesan animasi pudar-kanan pada imej menggunakan CSS, anda boleh cuba jalankan kod berikut -
Contoh
Demo Langsung
<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 fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInRight"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Atas ialah kandungan terperinci Gunakan CSS untuk pudar dalam kesan animasi 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：Ciri media pertuturan CSS Speak-asArtikel seterusnya：Ciri media pertuturan CSS Speak-as