search

Home >Web Front-end >CSS Tutorial >Animating CSS margin-bottom property

Animating CSS margin-bottom property

PHPz
PHPzforward
2023-08-26 08:29:091365browse

动画 CSS margin-bottom 属性

To animate the margin-bottom property in CSS, you can try running the following code

Example

Online demonstration 

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            animation: mymove 3s infinite;
            margin-bottom: 20px;
         }
         @keyframes mymove {
            70% {
               margin-bottom: 60px;
            }
         }
      </style>
   </head>
   <body>
      <p>This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
      </p>
      <p>This is demo text 2!</p>
   </body>
</html>

The above is the detailed content of Animating CSS margin-bottom property. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Create falloff shadows using CSSNext article：Create falloff shadows using CSS

Related articles

See more