Shimmering effect on hover for CSS animation

Is there a way to create a CSS-only animation that fades in and out until hovered when displayed in full? I can achieve both effects separately, but I'm struggling to make them work together. The hover element doesn't seem to be functioning properly. Despite trying various combinations, I've managed to get the two separate parts working:

@keyframes flickerAnimation {
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 2s infinite;
   -moz-animation: flickerAnimation 2s infinite;
   -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}

/* CSS for hover */
.animate {
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;
}

.animate:hover {
  opacity: 1.0;
  transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
}

#box {
  width: 100px;
  height: 100px;
  background-color: #000;
}
<div id="box" class="animate-flicker animate">

cssanimationhovercss-animations

Answer №1

In my previous comment, I mentioned that it is not possible to achieve this. According to the documentation:

As stated in [CSS3CASCADE], animations take precedence over regular rules

One workaround could be to remove the animation on hover:

@keyframes flickerAnimation {
  0%   { opacity:0.4; }
  50%  { opacity:0; }
  100% { opacity:0.4; }
}

.animate-flicker {
    animation: flickerAnimation 2s infinite;
}

/* Styling for hover */
.animate {
    height:100px;
    background:red;
    opacity: 0.1;
    transition: opacity 0.2s ease-in-out;
}

.animate:hover {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  animation:none;
}
<div class="animate animate-flicker">

</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

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...

htmlcssflexbox

Ensure that the image inside a resizable container maintains the correct aspect ratio

I often encounter a situation where I need to showcase a series of thumbnails/images that adhere to a specific aspect ratio within a flexible container. My current approach involves using a transparent, relatively positioned image to enforce the correct as ...

htmlcss

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...

jqueryhtmlcss

What is the best way to display and conceal various elements with each individual click?

Utilizing the onClick function for each triggering element, I have implemented a show/hide feature for multiple element IDs upon click. The default setting is to hide the show/hide elements using CSS display property, except for the initial 3 main elements ...

javascriptjquerycssshow-hide

Adjust the height of the Twitter Widget to be proportionate to the height of its parent div dynamically

I have integrated the Twitter widget into my library management system, but I am facing an issue with its fixed height. Is there a way to make the height dynamic through CSS? Any suggestions on how this can be achieved will be greatly appreciated. Below ...

htmlcsstwitterwidgettwitter-widget

Incorporating pre-designed elements into the bottom section of my

I'm currently facing an issue while trying to integrate a footer content from a template into my slideout footer. The problem is that the template footer is currently spanning across the entire width of the page, and I am struggling to contain it with ...

jqueryhtmlcsstwitter-bootstrapfooter

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

javascriptjquerycss

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

Choose the initial drop-down option and concentrate on it

How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...

jqueryhtmlcss

Tips for incorporating inline images with gatsby-image

Seeking Solution In my quest to query and showcase images with a maximum width of 350px, I am hoping to have them displayed inline-block for tablets and larger screens. Ideally, each image would sit next to one another and wrap if they exceed the parent d ...

javascriptcssreactjsimagegatsby

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...

csssvgbackground-image

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

Unexpected behavior with first-child selector in a simple CSS code

It seemed so clear to me, but it turns out I was mistaken. Check out this link $('p:first-child').css({color:'red'}); The color of all text is not being altered. <div class="post text"> <a href="#">this is a url</a> ...

jqueryhtmlcss

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

The effectiveness of border-radius is limited to only one side of the div

After experimenting with applying the border-radius property to a div, I encountered an issue where the border radius only worked on one side when the radius value was too large. How can I resolve this problem while maintaining the border-radius value on a ...

htmlcssborderborder-radius

Arranging DIVs in a vertical layout

Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...

javascriptjquerycss

The image appears to be overlapping within the navigation bar

I'm having trouble understanding why the image is overlapping on this website. The image is enclosed in a link tag, and upon inspecting it, the link tag seems to be correctly positioned while the image appears slightly below. I can't seem to ide ...

htmlcssimagetwitter-bootstrap

Master the Art of Creating Responsive Table Rows

Can someone please help me with making my table of rows and columns mobile responsive? I have inserted data from the database, but it doesn't adapt well for mobile devices. I have used element1 and content1 id for the background of the elements, but h ...

htmlcssresponsive