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

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

Recommend

Complete steps to achieve high availability with nginx combined with keepalived

Preface In order to meet the high availability of...

Steps to install GRUB on Linux server

How to Install GRUB for Linux Server You cannot u...

Tutorial on installing GreasyFork js script on mobile phone

Table of contents Preface 1. Iceraven Browser (Fi...

How to modify the length limit of group_concat in Mysql

In MySQL, there is a function called "group_...

About converting textarea text to html, that is, carriage return and line break

Description: Change the carriage return in the tex...

Detailed explanation of HTML's <input> tag and how to disable it

Definition and Usage The <input> tag is use...

Pure CSS to achieve the text icon function by taking the first character of the string

How to implement text icons through CSS /*icon st...

8 examples of using killall command to terminate processes in Linux

The Linux command line provides many commands to ...

A brief discussion on the difference between Mysql primary key index and non-primary key index

Table of contents What is an index The difference...

React Router V6 Updates

Table of contents ReactRouterV6 Changes 1. <Sw...

HTML marquee tag usage examples

This tag is not part of HTML3.2 and only supports ...

How to deploy Solidity smart contracts using ethers.js

If you have developed DApps on Ethereum, you may ...

Docker container monitoring principle and cAdvisor installation and usage instructions

It is very important to monitor the operating sta...

How to configure the maximum number of files that can be opened by each Nginx process

1. Check the maximum number of open files in the ...

Detailed tutorial on installing MYSQL under WINDOWS

1. Download the installation package -Choose the ...