Home > Article > Web Front-end > Use CSS to launch animation effects

Use CSS to launch animation effects

WBOYforward: 2023-09-08 16:29:15710browse

使用 CSS 推出动画效果

To create an expand animation effect using CSS, 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 rollOut {
            0% {
               opacity: 1;
               -webkit-transform: translateX(0px) rotate(0deg);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateX(100%) rotate(120deg);
            }
         }

         @keyframes rollOut {
            0% {
               opacity: 1;
               transform: translateX(0px) rotate(0deg);
            }
            100% {
               opacity: 0;
               transform: translateX(100%) rotate(120deg);
            }
         }

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

   </head>
   <body>

      <div id = "animated-example" class = "animated rollOut"></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 launch animation effects. 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：CSS grid rowsNext article：CSS grid rows

See more

Use CSS to launch animation effects

Example

Related articles