Having difficulty transforming both scale and box-shadow at the same time

Is there a way to animate the circle's box-shadow while also scaling it down from 1.6x to 1 during the same transition period?

I'm having trouble with the timing of the scale animation, as it seems to occur after the box-shadow animation is finished.

body {
  background-color: #333;
}

.ripple {
  width: 20px;
  margin: 50px auto;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
  animation: rippleeff 2s ease infinite;
}

@keyframes rippleeff {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    transform: scale(1.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
    transform: scale(1.6);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    transform: scale(1);
  }
}
<div class="ripple">

</div>

Fiddle

htmlcsscss-animationscss-transformsbox-shadow

Answer №1

After applying a scale(1.6) transformation, the box-shadow on your element becomes transparent. When reverting back to scale(1), the box-shadow animates but remains invisible due to its transparency. To rectify this, change the color of the box-shadow.

You can also modify the scale value in the provided code snippet...

body {
  background-color: #333;
}

.ripple {
  width: 20px;
  margin: 50px auto;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
  animation: rippleeff 2s linear infinite;
}

@keyframes rippleeff {
  0% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
    transform: scale(1.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    transform: scale(1);
  }
}
<div class="ripple">

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery slideToggle function not working properly when clicking on a link within a div

I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is cli ...

javascriptjqueryhtmlcss

How do I enable automatic playback for a vimeo video using the embed tag?

Currently, I am facing a challenge with the following embed tag in my HTML file: <embed src='{{"https://player.vimeo.com/video/{$videouri}?autoplay=true"}}'width="300" height="361" /> I am experiencing difficulties when trying to use the ...

phphtmllaravelvimeo

In what way can an item be "chosen" to initiate a certain action?

For example, imagine having two containers positioned on the left and right side. The left container contains content that, when selected, displays items on the right side. One solution could involve hiding elements using JavaScript with display: none/in ...

javascripthtmlradio-button

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

htmlcsswindowsmacosgoogle-chrome

Design all buttons, except for the two specific buttons

.button , button{ border:solid black 2px !important; } Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that? ...

htmlcssbuttonborder

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

javascripthtmlcssreactjsbootstrap-4

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Within this specific HTML document, there are multiple div elements that have an absolute positioning applied to them I am looking to develop a JavaScript code that can determine the row of each individual div. I define a row as any space on the vertical ...

javascripthtml

Automatically scraping Facebook API data with PHP

I'm completely new to php and I am looking for a way to automatically scrape metadata. I came across a solution, but I am unsure how to implement it in php. POST /?id={object-instance-id or object-url}&scrape=true Can anyone provide a sample php ...

phphtmlfacebook-graph-api

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

javascripthtmlcss

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

javascripthtmlimagebackgroundonmouseover

Dependent on the use of the HTML attribute 'required' for basic form validation

My inquiry is straightforward: I am currently developing a login/registration form for my website using HTML, PHP, and jQuery. I am wondering if it is essential to implement form validation in PHP as well, or if utilizing the 'required' attribut ...

phphtmlformsweb

Should I use several if get statements on one page, or spread them out across multiple pages in PHP structure?

After working with PHP for a few years, one of my ongoing dilemmas is how to best structure my pages. Should I follow the current approach: if(getValue('action') == "jobsFilter" && getValue('jobType') == "open") ...

phphtmloop

Utilizing Jquery to implement active state and unique IDs during mouseover operation

I found this great example on Stack Overflow that demonstrates Jquery Show/Hide functionality when hovering over links. It works perfectly by showing the content of the next div when the corresponding link is hovered over. However, I'm facing an issu ...

jqueryhtmlcss

What is the best method to eliminate unnecessary space between controls in HTML?

Presently, I am facing the following scenario. http://jsfiddle.net/ef7vh/1/ </p> <pre> <div> <button>Button1</button> <span style="border: solid 1px black; padding: 0px 10px 0px 10px">My Text</span> < ...

htmlcss

I need to extract information from the database and save all entries from the form in order to send them to myself. This includes calculating the real-time multiplication of weight and pieces

For a project, I need to gather contact data from the client, and then populate a MySQL database with the information to create new rows in a table. There's an additional requirement where I have to calculate the total weight of element pieces multip ...

javascriptphphtml

Is there a way to lower just one border?

I need assistance with moving the .container div downward on my webpage. I attempted using (margin-top: 30px) and it worked, but unfortunately, it also shifted down the border of the (.container) along with the outline of .all. My goal is to have only the ...

htmlcss

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

What's the best way to ensure uniform card height in Material-UI?

Is there a way to ensure consistent card height in Material-UI without setting a fixed height? I want the card heights to dynamically adjust based on content, with all cards matching the tallest one on the website. How can this be achieved while also addin ...

cssreactjsmaterial-ui