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

Solution for forgetting the root password of MySQL5.7 under Windows 8.1

【background】 I encountered a very embarrassing th...

Solution to MySql Error 1698 (28000)

1. Problem description: MysqlERROR1698 (28000) so...

WeChat applet implements a simple calculator

WeChat applet's simple calculator is for your...

Vue uses three methods to refresh the page

When we are writing projects, we often encounter ...

An article to help you thoroughly understand position calculation in js

Table of contents introduction scroll Element.scr...

Pure CSS free implementation code for websites to have dark mode switching function

Preface The concept of dark mode originated from ...

Vue implements internationalization of web page language switching

1. Basic steps 1: Install yarn add vue-i18n Creat...

Basic usage examples of Vue named slots

Preface Named slots are bound to elements using t...

How to install docker using YUM

As shown in the following figure: If the version ...

Use shell script to install python3.8 environment in CentOS7 (recommended)

One-click execution To install Python 3.8 in a vi...

In-depth explanation of MySQL common index and unique index

Scenario 1. Maintain a citizen system with a fiel...

Detailed explanation of HTML basic tags and structures

1. HTML Overview 1.HTML: Hypertext Markup Languag...

The DOCTYPE mode selection mechanism of well-known browsers

Document Scope This article covers mode switching...

MySQL query redundant indexes and unused index operations

MySQL 5.7 and above versions provide direct query...

Echart Bar double column chart style most complete detailed explanation

Table of contents Preface Installation and Config...