CSS animation document

The CSS animation properties

rendering

introduce

The animation property is a shorthand property that sets six animation properties:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

grammar

animation: name duration timing-function delay iteration-count direction;
Copy the code

The source code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>animation</title> </head> <style> .point { width: 50px; height: 50px; background-color: #2ea598; position: relative; border-radius: 50%; } /* Set the pre-animation color */. Point -flicker:after {background-color: #2ea598; } /* Set the animation color */. Point-flicker :before {background-color: rgba(0, 168, 253, 0.2); } /* Set animation */.point-flicker:before,.point-flicker:after {content: "; width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; border-radius: 50%; Animation: warn 1.5s ease-out 0s infinite; } @keyframes warn {0% {transform: scale(0.5); opacity: 1; } 30% { opacity: 1; } 100% {transform: scale(1.4); opacity: 0; } } </style> <body> <div class="point point-flicker"></div> </body> <script> </script> </html>Copy the code

supplement

If you need to change the position on the page

Set.point to position:absoulute and change the left and top positions

.point-Flicker is positioned relative to.point

Margin-left: -40px; margin-top: -40px; Change to half the corresponding size