hover-triggered keyframe animation

Recently, I've been experimenting with CSS keyframe animation using the code below:

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  animation: pulse 2s infinite;
  float: left;
}

.pulse-animation:hover {
  animation: none;
}

@keyframes pulse {
  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);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

I attempted to modify the animation behavior for hover only, but unfortunately, it didn't produce the desired results. Even after changing the hover animation, I still couldn't get it to work correctly. Can anyone offer some assistance or guidance?

htmlcsskeyframe

Answer №1

:hover is the state when your mouse hovers over an element. To prevent animation from playing when not hovering, you can set animation: none; on the default state of .pulse-animation. When you hover over the .pulse-animation class, then you can set animation: pulse 2s infinite;

Check out the example below

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  animation: none;
  float: left;
}

.pulse-animation:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  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);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

Answer №2

To make it work only on hover, simply remove the animation from .pulse-animation and place it within :hover instead. Here is how you can achieve that:

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  float: left;
}

.pulse-animation:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  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);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

Answer №3

To incorporate animation on a :hover-element, you must define the animation for the :hover-element.

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
 
  float: left;
}

.pulse-animation:hover {
   animation: pulse 2s infinite;
}

@keyframes pulse {
  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);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

Answer №4

You should eliminate the animation on .pulse-animation by using animation: none; and then apply the same properties to .pulse-animation when hovered over with .pulse-animation:hover{ }

.pulse-animation {
  margin: 50px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  animation: none;
  float: left;
}

.pulse-animation:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  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);
  }
  70% {
    -moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />

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

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Adjust CSS classes as user scrolls using skrollr

I am currently facing an issue with the prinzhorn/skrollr plugin when trying to use removeClass/addClass on scroll function. I have attempted to find a solution but unfortunately, nothing has worked for me. <li class="tab col s3"><a data-800="@cl ...

javascriptjqueryhtmlcssskrollr

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

htmlcssflexbox

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

javascripthtmlangularjsangular-ui-grid

Utilizing offsets/push in the correct manner

I have been developing a Bootstrap website and I wanted to get some feedback on my current code structure. The design is coming along nicely, but I am unsure if this aligns with best practices? <div class="container-fluid"> <div class="row"> ...

htmlcsstwitter-bootstrap

WordPress Ignoring PHP Generated Elements When Processing Divs

Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...

phphtmlcsswordpress

Searching for all classes and IDs in a CSS Stylesheet that include a specific keyword

I am currently working with a premium WordPress theme that has an extensive styles.css file consisting of over 25,000 lines. My goal is to make sitewide changes to the font and main color, and in order to do this effectively, I need to identify all classes ...

cssregex

Unable to alter the css of a jQuery object

I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery obj ...

javascriptjquerycssbackbone.js

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

javascripthtmlcssgoogle-webfonts

Tips to detect a specific animation completion on an element?

How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a ...

javascriptjqueryhtmlcss

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

IE9 does not properly display SVGs used as background images

Utilizing SVG files as backgrounds for my HTML elements has been successful in most major browsers. However, an issue arises when trying to ensure compatibility with Internet Explorer 9. The problem lies within IE9's rendering of the SVG backgrounds, ...

htmlcsssvginternet-explorer-9background-image

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

javascriptjqueryhtmljsononload

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

I am currently working on enhancing telmo sampiao's shopping cart series code by adding functionality for removing items and implementing increment/decrement buttons, all while incorporating local storage to store the data. function displayCart(){ ...

javascripthtmlshopping-cart

What is the correct way to display my data in a table using XSLT?

Here is the desired look I'm aiming for I am still learning about xml/xsl, so please point out any errors kindly (: Below is a snippet from an xml file: <weather yyyymmdd="20200616"> <year>2020</year> <month>06< ...

htmlxmlxslt

Having trouble incorporating custom CSS into my Rails/Bootstrap project

I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...

cssruby-on-railstwitter-bootstrap

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...

htmlcsscss-transforms

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

javascriptphphtml

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

htmlcsspositioningcss-position