Home >Web Front-end >CSS Tutorial >Use CSS to pop up the left animation effect

Use CSS to pop up the left animation effect

PHPzforward: 2023-08-29 12:13:101251browse

使用 CSS 弹出左侧动画效果

Use CSS to achieve the left pop-up animation effect. You can try running the following code

Example

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

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

         .bounceOutLeft {
            -webkit-animation-name: bounceOutLeft;
            animation-name: bounceOutLeft;
         }
      </style>
   </head>

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

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

   </body>
</html>

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

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is the greater-than (>) selector in CSS?Next article：What is the greater-than (>) selector in CSS?

See more

Use CSS to pop up the left animation effect

Example

Related articles