Home > Article > Web Front-end > Bounce left animation effect using CSS

Bounce left animation effect using CSS

WBOYforward: 2023-08-25 17:53:09513browse

使用 CSS 向左弹跳动画效果

Use CSS to achieve the animation effect of popping in from the left. You can try running the following code −

Example

Real-time 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 bounceInLeft {
            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 bounceInLeft {
            0% {
               opacity: 0;
               transform: translateX(-2000px);
            }
            60% {
               opacity: 1;
               transform: translateX(30px);
            }
            80% {
               transform: translateX(-10px);
            }
            100% {
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

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

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

The above is the detailed content of Bounce left animation effect using CSS. 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：Create a column layout using CSSNext article：Create a column layout using CSS

See more

Bounce left animation effect using CSS

Example

Related articles