An example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward

Preface

This article mainly shares with you an example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward. The article involves CSS3 animation (animation), 2D transformation (transform: scale)

A new animation property is added in CSS3, which is similar to creating an animation object.

For example: animation: bounce 2.0s infinite ease-in-out;

The animation has the following parameters:

property	describe	CSS
animation	Shorthand property for all animation properties except the animation-play-state property.	3
animation-name	Specifies the name of the @keyframes animation.	3
animation-duration	Specifies the number of seconds or milliseconds it takes for an animation to complete one cycle. The default is 0.	3
animation-timing-function	Specifies the speed curve of the animation. The default is "ease".	3
animation-delay	Specifies when the animation starts. The default is 0.	3
animation-iteration-count	Specifies the number of times the animation is played. The default is 1.	3
animation-direction	Specifies whether the animation should be played in reverse on the next cycle. The default is "normal".	3
animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3
animation-fill-mode	Specifies the state of an object outside of its animation time.	3

2D transformations in CSS 3 are implemented using two properties:

property	describe	CSS
transform	Applies a 2D or 3D transformation to an element.	3
transform-origin	Specifies the location of the base point for the transformation.	3

Static renderings:

As shown in the code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@keyframes warn {
 0% {
  transform: scale(0);
  opacity: 0.0;
 }
 25% {
  transform: scale(0);
  opacity: 0.1;
 }
 50% {
  transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  transform: scale(1);
  opacity: 0.0;
 }
}
@-webkit-keyframes "warn" {
 0% {
  -webkit-transform: scale(0);
  opacity: 0.0;
 }
 25% {
  -webkit-transform: scale(0);
  opacity: 0.1;
 }
 50% {
  -webkit-transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  -webkit-transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  -webkit-transform: scale(1);
  opacity: 0.0;
 }
}
 
.container {
 position: relative;
 width: 40px;
 height: 40px;
 border: 1px solid #000;
}
/* Keep the size of the small circle unchanged*/
.dot {
 position: absolute;
 width: 6px;
 height: 6px;
 left: 15px;
 top: 15px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border: 2px solid red;
 border-radius: 20px;
 z-index: 2;
}
/* Generate an animated circle (spreading outward and getting bigger)*/
.pulse {
 position: absolute;
 width: 24px; 
 height: 24px;
 left: 2px;
 top: 2px;
 border: 6px solid red;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 z-index: 1;
 opacity: 0;
 -webkit-animation: warn 3s ease-out;
 -moz-animation: warn 3s ease-out;
 animation: warn 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}
</style>
 
</head>
 
<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</body>
</html>

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.

<<: Vue sample code for online preview of office files

>>: HTML line spacing setting methods and problems