Use CSS to fade out the right animation effect-CSS Tutorial-php.cn

Use CSS to fade out the right animation effect

WBOY

Release： 2023-08-28 15:53:02

forward

866 people have browsed it

使用 CSS 淡出右侧动画效果

To achieve the right side fade animation effect using CSS on an image, you can try running the following code −

Example

Live demonstration

<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 fadeOutRight {
            0% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateX(20px);
            }
         }

         @keyframes fadeOutRight {
            0% {
               opacity: 1;
               transform: translateX(0);
            }
            100% {
               opacity: 0;
               transform: translateX(20px);
            }
         }

         .fadeOutRight {
            -webkit-animation-name: fadeOutRight;
            animation-name: fadeOutRight;
         }
         animation-name: fadeOutLeft;
     
   </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOutRight"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Copy after login

The above is the detailed content of Use CSS to fade out the right animation effect. For more information, please follow other related articles on the PHP Chinese website!