"Spinning Effect in CSS with a Pulsating Twist

I am attempting to create a unique CSS animation that involves rotating an image and giving it a pulsing effect similar to the animation seen on Shazam's button. Here is the code that I have so far. While the image is successfully rotating, I am running into issues when trying to apply a scale transformation to create the pulsating effect.

    .animated {
    animation-duration: 5s; 
        -webkit-animation-duration: 5s; 
    animation-fill-mode: none;
        -webkit-animation-fill-mode: none;
    animation-timing-function: linear;
        -webkit-animation-timing-function: linear; 
    animation-iteration-count: infinite; 
        -webkit-animation-iteration-count: infinite; 
} 

@keyframes rotate { 
    0% { 
        /*transform: scale(1);*/
        transform-origin: center center; 
        transform: rotate(-360deg);
    }
    50% {
        /*transform: scale(1.1);*/
        transform-origin: center center;
    }
    100% { 
        /*transform: scale(1);*/
        transform-origin: center center; 
        transform: rotate(0);
    } 
} 

@-webkit-keyframes rotate { 
    0% {
        /*-webkit-transform: scale(1);*/ 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(-360deg);   
    }
    50% {
        /*-webkit-transform: scale(1.1);*/
        -webkit-transform-origin: center center;
    }  
    100% { 
        /*-webkit-transform: scale(1);*/
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(0);
    } 
}

.rotate { 
    animation-name: rotate; 
        -webkit-animation-name: rotate;  
}

Is there anyone who can offer some guidance or assistance with this issue? Any help would be greatly appreciated.

Answer №1

This is just an educated guess as I am not familiar with how you code in HTML (markup).

It is important to include all the transform properties in each step of the keyframe.
For instance, if any of the keyframes have set: transform: scale(2); then only scaling will occur.

Therefore, make sure to define all the transform properties in each keyframe.
For example, use

transform: scale(value) rotate(value);
in every keyframe.

.animated {
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@keyframes rotate {
  0% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(-360deg) scale(1);
  }
  50% {
    /*transform: scale(1.1);*/
    transform-origin: center center;
    transform: rotate(-180deg) scale(0.1);
  }
  100% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(0) scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-360deg) scale(1);
  }
  50% {
    /*-webkit-transform: scale(1.1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-180deg) scale(0.1);
  }
  100% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0) scale(1);
  }
}
.rotate {
  animation-name: rotate;
  -webkit-animation-name: rotate;
}
<div>
  <img class="animated rotate" src="http://lorempixel.com/400/200" />
</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

Cells within a table are equivalent

I am attempting to ensure that all table cells match the size of the image, but for some reason, they are not aligning properly. Visit this link for reference. Here is a condensed version of the HTML code: <table> <tr> <td> ...

How do I incorporate a jcarousel slider into a thickbox popup using jQuery, HTML, and CSS?

I'm attempting to incorporate a dynamic car carousel slider into a popup that opens with Thickbox. I've made numerous attempts but haven't achieved success yet. It works when called directly in HTML, but doesn't function properly when ...

Modernized Style - Additional Scrolling Feature for List Element

I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/ Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The p ...

Custom Web Development for Personalized Products

We are newbies attempting to enhance the product personalization experience for our customers. Our website is currently built on Wordpress CMS and utilizes Woo. Our goal is to provide our customers with a complete product personalization experience. Our p ...

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...

I am experiencing issues with Google Fonts not functioning properly when I insert the bootstrap CDN

I have encountered an issue while working on my landing page. I am using Google fonts for the design and trying to integrate Bootstrap as well. However, whenever I add the Bootstrap link, all the font styles stop working. I have checked the order of the CS ...

Clicking on the initial link will in turn prompt clicks on the subsequent links

Can you please provide instructions on how to correctly simulate a click on the remaining links if a click is made on the first link? jQuery('a.one_num').click(function() { jQuery('a.two_num').click(); jQuery('a.three_num&ap ...

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

Navigational Drop-down Menu - Utilizing Next.js and Tailwind CSS

Currently, I'm tackling a project that requires me to implement a dropdown menu using tailwind CSS and Next.js. Would be incredibly thankful if someone could provide me with a sample code for this feature. ...

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

Use jQuery to replace this color with that color in CSS every time it appears

I have numerous div elements, some with a background-color: #aaa, others with font color: #aaa, and some with border-color: #aaa. There are also divs with various other colors. I am looking to update these colors (#aaa) to #ccc throughout the CSS. While ...

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

Creating a jQuery variable in version 1.9.1 results in an error, whereas in version 1.8.3 it does not succeed

Recently updated to version 1.9.1 and encountered some technical difficulties. Despite that, everything works fine except for one thing: var $newthumbs = $(' <div id=\"car-7\" class=\"thumbnail_car thumbnail span2&bso ...

Repeatedly animate elements using jQuery loops

Whenever I click a button, a fish should appear and randomly move over a container at random positions. However, in my current code, the animation only occurs once and does not repeat continuously. I want to create a generic function that can be used for m ...

Utilizing a 100% width Bootstrap form with SelectBoxIt inputs

Utilizing SelectBoxIt inputs () in Bootstrap 3 horizontal forms is causing an issue. I want the input to adjust and collapse along with the form width, but setting the widths to 100% is causing them to collapse instead. To demonstrate the problem, I' ...

Ways to enhance a website by adding a custom calculated column

I'm feeling a bit lost and in need of some technology advice. What is it that I truly desire? Picture this scenario: You land on a website and come across a table/div setup that looks something like this: <div class="a"> <div class="pri ...

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

Saving and retrieving user input as a variable using Javascript and HTML local storage

This is the foundation of my HTML page. When the "remember text" paragraph is clicked, the data in the input text box is saved to local storage as a string. Clicking the "recall text" paragraph loads the stored data into the "recalled text" paragraph. I am ...