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

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

javascriptcsstypescriptreact-nativeexpo

"Troubleshooting a JSON structure containing a complex array of objects with multiple layers

I've structured a complex array with JSON objects to allow users to customize background images and create unique characters. Below is the main code snippet: var newHead; var newBody; var newArm; var masterList = [ { {"creatureName":"Snowman ...

javascripthtmljson

Steps for using the ModelName.objects.filter method in HTML

I'm looking to streamline the amount of code needed in my view and aiming to achieve this directly in my HTML file: {% for committee in c %} {% for article in Article.objects.filter(committee=committee) %} <a class="post-link" hre ...

htmldjangodjango-models

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

Discovering with jQuery

Can we actually change the background color of '.preview-inner' to yellow from "#change_color"? <div id = "form-container> <input class="color-picker" id="change_color" type="text"> <div class="replacer"> <div class= ...

jqueryhtml

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

Even though my form allows submission of invalid data, my validation process remains effective and accurate

Here is the code I have written: <!doctype html> <html lang="en"> <head> <title>Testing form input</title> <style type="text/css></style> <script type="text/javascript" src="validation.js"></script> &l ...

javascripthtmlcssformsvalidation

Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...

htmlcssimage

Is it possible to switch the orientation of the input fields from vertical to horizontal?

My custom form is displayed below: <form novalidate class="form-group" ng-hide="tab==1"> Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> Min Price: <input type="numbe ...

htmlcssformstwitter-bootstrap

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

The functionality of fetching website titles using Ajax/jQuery is experiencing some limitations

Below is a code snippet for a simple website title getter: $( document ).ready(function() { $("#title").click(function() { var SubURL = $("#input").val(); $.ajax({ url: "http://textance.herokuapp.com/title/"+SubURL+"/", complete: function(da ...

javascriptjqueryhtmlajaxheroku

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Issue with tile size or alignment in Safari

Recently, while creating my portfolio on CodePen, everything was running smoothly except for one little hiccup - Safari. http://codepen.io/tpalmer75/pen/FijEh (SASS for just one .item element) .item width: calc(100% / 3) display: inline-block height ...

jqueryhtmlcsssafarimasonry

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

javascripthtmlreactjstypescript

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss

Adjust the height for just one md-tab

Looking to find a way to set the height of the content within an <md-tab> element to be 100% in a flexible manner. For example, consider the following structure: <body> <md-content> <md-tabs> <md-tab label= ...

javascripthtmlcssangularjsangularjs-material

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you. Below is the code snippet: fun ...

javascripthtmljquerycsstr

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

javascripthtmlcss

Capturing user input in HTML and passing it to JavaScript

I have a good grasp on how to implement input in HTML to execute JavaScript functions that are defined in the same directory as the HTML file. For example: <input type="button" value="Submit" onclick="someFunc(500)" > When the button is clicked, th ...

javascripthtml

Utilizing angularjs ng-repeat directive to present JSON data in an HTML table

I've been struggling to showcase the JSON data in my HTML table using AngularJS ng-repeat directive. Here's the code snippet: <thead> <tr> <th ng-repeat="(header, value) in gridheader">{{value}}</th> </tr> </ ...

javascriptjsonangularjshtml