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

Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate lea ...

htmlcsstextcss-animations

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic. This is how my css/html is currently structured: .links { display: block; } .links a { color: #000000; text-decoratio ...

javascripthtmlcss

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...

cssinternet-explorer

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

javascripthtmlangularjsangularjs-directive

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

I have been tasked with printing web pages of a website that utilize jqgrid, Jquery calendar, various Jquery UI components, and background images. The server side is built with Zend Framework. Although I lack experience in web page printing, this has beco ...

javascriptjquerycssprintingjqgrid

Generate checkboxes by utilizing the JSON data

Here is a snippet of my JSON data: [ { "type": "quant", "name": "horizontalError", "prop": [ 0.12, 12.9 ] }, { "type": "categor", "name": "magType", "prop": [ ...

javascripthtmljsonmenu

Is there a way to eliminate the surplus 2 download icons from this Angular code when there are a total of 3 users?

Here is some HTML code snippet: <tr *ngFor="let user of users"> <td> <h6 class="font-medium">{{user.id}}</h6> </td> <td> <h ...

javascripthtmljsonangular

Tips on how to center an image within a table cell:1. Insert the image

I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML ...

htmlcssbootstrap-4

The getElementById function can only select one option at a time and cannot select multiple options

I'm having an issue with a JavaScript function that is supposed to allow me to select multiple options, but it's only selecting the first one. Here is the JavaScript code: function index(){ var a="${staffindex}".replace("[",""); ...

javascripthtmlselectgetelementbyid

What is the best way to adjust the placement of this object so it is anchored to the left side?

I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React from 'react' import &apo ...

cssreactjs

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

htmlcssbootstrap-4bootstrap-5

Linking an element's class to the focus of another element in Angular

In my Angular application, I have multiple rows of elements that are wrapped with the myelement directive (which is a wrapper for the input tag). To highlight or focus on one of these elements at a time, I apply the .selected class in the styles. Everythi ...

javascripthtmlcssangularjs

Arranging items in CSS and showing them stacked on top of each other

How can I rearrange the order of id3 to be displayed below id2 instead of on the side using CSS? Here is an example of the HTML and CSS: HTML <div class="main" ></div> <div id="id1">Im in div1</div> <div id="id2">Im in div2 ...

htmlcss

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

phpjavascripthtmlcsstwitter-bootstrap

Wide container using Bootstrap

Currently, I am incorporating Bootstrap v5 alpha to develop a basic dashboard. According to Bootstrap guidelines, it is essential to utilize .container, .container-fluid, or .container-{size}, followed by .row and .col columns. However, I wish for the das ...

csstwitter-bootstrapbootstrap-4sass

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs

Updating Sencha list itemTpl on the fly

Is there a way to dynamically change the itemTpl in a Sencha list to adjust the visibility of a column based on certain conditions? Your assistance would be greatly appreciated. ...

javascripthtmllistcsssencha-touch

Modify the :after property of an element using jQuery

Is there a different approach I can take to achieve this desired outcome? Currently, the code snippet below is not yielding the expected results. $('.child_flyout:after').css({'top':'20px'}); Are there any alternative method ...

jquerycss

Safari does not stop the scrolling of the <body style="overflow-y: hidden"> tag

Welcome to this simple HTML page <body style="overflow-y: hidden"> ... </body> This page is designed to prevent scrolling by using the CSS property overflow-y: hidden. While this functionality works as intended on most browsers, it does ...

cssscrollsafarioverflowmobile-safari