Thrilling visual loops in motion with CSS animations

Question

Thrilling visual loops in motion with CSS animations

Currently, I am working on developing a captivating 'pulsating rings' animation that revolves around a circular image with the use of CSS animations.

The image itself is a circle measuring 400px in width. Although I have successfully implemented an overall pulsating effect for the entire image, I am faced with the challenge of creating and animating separate pulsating rings surrounding the image.

My preference is to keep the image static while allowing the rings to pulsate dynamically around it.

Here's my current code snippet;

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png"></div>

CSS

.container {
  padding: 20px;
}

@-webkit-keyframes pulse_animation {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: 'pulse_animation';
  -webkit-animation-duration: 3000ms;
  -webkit-transform-origin: 70% 70%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
}

A live demo can be found on this fiddle link.

The desired outcome is to achieve ring animations akin to the ones showcased in this example.

I believe I am quite close to achieving this effect. Any tips or suggestions would be greatly appreciated.

html css css-animations

Answer 1

Answer №1

To create a pulsating effect, you can insert a new div that matches the width and height of the image, give it a border, and then animate it.

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png">
  <div class="pulse-ring">
  </div>

</div>

CSS

.pulse-ring {
  content: '';
  width: 400px;
  height: 400px;
  border: 10px solid #F00;
  border-radius: 50%;
  position: absolute;
  top: 18px;
  left: 18px;
  animation: pulsate infinite 1s;
}

Check out this example on JSFiddle

Answer 2

To create a pulsating effect, you can insert a new div that matches the width and height of the image, give it a border, and then animate it.

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png">
  <div class="pulse-ring">
  </div>

</div>

CSS

.pulse-ring {
  content: '';
  width: 400px;
  height: 400px;
  border: 10px solid #F00;
  border-radius: 50%;
  position: absolute;
  top: 18px;
  left: 18px;
  animation: pulsate infinite 1s;
}

Check out this example on JSFiddle

Answer 3

Answer №2

If I were to tackle this, here's how I'd approach it:

<div class="container">
  <img src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png" />
  <div class="circle"></div>
</div>

.circle {
  border: solid 13px black;
  border-radius: 100%;
  position: absolute;
  top: 40px;
  left: 40px;
  width: 350px;
  height: 350px;
  z-index: 10;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Check out the JSFiddle demonstration here

Essentially, you'll want to introduce another div, shape it like a circle, position it over the image, and then apply the animation effects to create the desired effect :)

Answer 4

If I were to tackle this, here's how I'd approach it:

<div class="container">
  <img src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png" />
  <div class="circle"></div>
</div>

.circle {
  border: solid 13px black;
  border-radius: 100%;
  position: absolute;
  top: 40px;
  left: 40px;
  width: 350px;
  height: 350px;
  z-index: 10;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Check out the JSFiddle demonstration here

Essentially, you'll want to introduce another div, shape it like a circle, position it over the image, and then apply the animation effects to create the desired effect :)

Answer 5

Answer №3

This is the method I used to achieve this effect.

https://codepen.io/user123/pen/Abcdefg

Essentially, I started with a circular shape and then created larger rings around it about four times. I then applied scale and opacity animations to enhance the visual appeal, adding a delay to each ring for a more dynamic effect.

I hope you find this explanation helpful!

Here is the code snippet:

@keyframes pulsate {
   0% {
      transform: scale(1, 1);
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      transform: scale(1.3, 1.3);
      opacity: 0;
   }
}

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

span {
  position: absolute;
  text-align: center;
}

.red-medium-circle {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), inset 2px 2px 4px rgba(0, 0, 0, .5);
  border: 2px solid red;
  animation: pulsate infinite ease-in-out 2s 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 6

This is the method I used to achieve this effect.

https://codepen.io/user123/pen/Abcdefg

Essentially, I started with a circular shape and then created larger rings around it about four times. I then applied scale and opacity animations to enhance the visual appeal, adding a delay to each ring for a more dynamic effect.

I hope you find this explanation helpful!

Here is the code snippet:

@keyframes pulsate {
   0% {
      transform: scale(1, 1);
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      transform: scale(1.3, 1.3);
      opacity: 0;
   }
}

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

span {
  position: absolute;
  text-align: center;
}

.red-medium-circle {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), inset 2px 2px 4px rgba(0, 0, 0, .5);
  border: 2px solid red;
  animation: pulsate infinite ease-in-out 2s 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

Thrilling visual loops in motion with CSS animations

Answer №1

Answer №2

Answer №3

Similar questions

The link does not respond to the first click

How can I retrieve the value of a div nested within another div?

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Display a preloader image while waiting for the content to load using jQuery or AJAX

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

What is the process for obtaining the Rails response object within your code?

Utilizing a Stylesheet for a Single Element

There seems to be an issue with the HTML link not redirecting properly, as it is directing to www.oldpage.com/http://www

Refreshing a single div with a variety of potential hyperlinks

What are some ways to align text both vertically and horizontally within columns?

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

Utilizing ngx-bootstrap Modal for Data Transfer to Component

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

Utilize the text box feature for manipulating the data field in Angular4

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

Checking the validity of data before submission can help ensure the accuracy and security of your application

Guide on retrieving the button value within a foreach loop by utilizing the post method

Styling for the bootstrap dropdown menu is missing

How can you align a div next to another using the float property in CSS?

CSS3 animations: the speed of transitioning between animations is sluggish