What is the method to create an animation that radiates from the center point?

Question

What is the method to create an animation that radiates from the center point?

I have developed animations featuring diagonally moving circular patterns.

div {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 100px 100px;
}

@keyframes animation1 {
  from {
    background-position: 0 0, 50px 0, 25px 50px, 75px 50px;
  }
  to {
    background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;
  }
}

<div></div>

I am interested in transforming this into an animation where each circle expands outwards from the center of the viewport.

However, as the background-image property is not Animatable, I am uncertain about how to execute this effect.

Could you provide guidance on achieving this?

css css-animations

Answer 1

Answer №1

To achieve the desired effect, you can create animation using the properties background-size and/or background-position:

body {
  margin:0;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 20px 20px;
  background-position: 50% calc(50% + 20px), calc(50% - 20px) 50%, calc(50% + 20px) 50%, 50% calc(50% - 20px);
}

@keyframes animation1 {
  from {
    background-size: 20px 20px;
    background-position: calc(50% - 10px) calc(50% + 20px), calc(50% - 20px) calc(50% + 10px), calc(50% + 20px) calc(50% - 10px), calc(50% + 10px) calc(50% - 20px);
  }
  to {
    background-size: 300px 300px;
    background-position: calc(50% - 10px) calc(50% + 100px), calc(50% - 100px) calc(50% + 10px), calc(50% + 100px) calc(50% - 10px), calc(50% + 10px) calc(50% - 100px);
  }
}

Answer 2

To achieve the desired effect, you can create animation using the properties background-size and/or background-position:

body {
  margin:0;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 20px 20px;
  background-position: 50% calc(50% + 20px), calc(50% - 20px) 50%, calc(50% + 20px) 50%, 50% calc(50% - 20px);
}

@keyframes animation1 {
  from {
    background-size: 20px 20px;
    background-position: calc(50% - 10px) calc(50% + 20px), calc(50% - 20px) calc(50% + 10px), calc(50% + 20px) calc(50% - 10px), calc(50% + 10px) calc(50% - 20px);
  }
  to {
    background-size: 300px 300px;
    background-position: calc(50% - 10px) calc(50% + 100px), calc(50% - 100px) calc(50% + 10px), calc(50% + 100px) calc(50% - 10px), calc(50% + 10px) calc(50% - 100px);
  }
}

What is the method to create an animation that radiates from the center point?

Answer №1

Similar questions

Dynamically setting CSS values with jQuery to center an image within a div

Creating a shape image border with a clickable container can be achieved by using a combination of HTML and CSS

Tips for modifying a particular element within a class?

Poor text display quality on Internet Explorer

Achieving vertical alignment and stretching of subchild within a flexbox element

What is the best way to line up the two stacked elements with a shared background image to give the appearance of a single cohesive image?

Having difficulty aligning the button in the center

Having trouble getting items to align properly in Bootstrap

Ways to combine text styling with images, stroke effects, and shadows all at once

Ensure that the inner div has a height of 100%

looking to change the background color of a CSS element

Disabling the movement of arrows in the client-testimonials-carousel plugin

employing JavaScript to present an image

What is the best way to place my website's logo in the top-left corner using html and css?

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing

increasing the margin around a heading inside a container with existing padding

Tips for preventing the overlap of two divs positioned absolutely within a div that is positioned relatively

Challenge with Hovering within Cufon Elements

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

Tips for repositioning the window when linking to a different section of a website