Maison >interface Web >tutoriel CSS >Utilisez CSS pour faire apparaître l'effet d'animation de gauche
Pour obtenir un effet d'animation de fondu depuis la gauche en utilisant CSS sur une image, vous pouvez essayer d'exécuter le code suivant −
Démo en direct
<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 fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } animation-name: fadeInDown; </style> </head> <body> <div id="animated-example" class="animated fadeInLeft"></div> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </head>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!