The motion does not adhere to the delay in transition

How come the first animation doesn't have a delay when hovering in and out? It just disappears instantly. I'm attempting to achieve a delay similar to the hue-rotate effect when hovering in and out.

https://jsfiddle.net/u7m1Ldq6/15/


 <div id="letter">
   <h1>Color disappears instantly when hovered in and out</h1>
 </div>

 <div id="good">
  <h1>There is a delay when hovered in and out</h1>
 </div>
 @keyframes glow {
  0% {
      box-shadow: 0 0 15px azure, 0 0 25px azure;
  }
  10% {
      box-shadow: 0 0 15px pink, 0 0 25px pink;
  }
  ...
</code></pre>
<p>vs.</p>
<pre><code>
@keyframes hue {
  100% {
    filter: hue-rotate(360deg);
  }
}

I attempted to recreate the JavaScript fiddle. My goal is to introduce a delay. When the div is hovered over, I want there to be a delay before the animation starts, and when the hover is removed, the color should fade out instead of disappearing instantly.

[jsfiddle.net/s2187wet/6]

Answer №1

The reason why it's not working is because you've applied a 500ms delay to the entire animation. This means that the animations will only start 0.5 seconds after hovering over the container, without any other effects.

To achieve the desired outcome, you need to add a transition to each shadow color switch and also increase the duration of the animation.


IN ADDITION TO THE ABOVE

Hue is unique in that it's not technically an animation. Despite being described as a hue animation that transitions across color spectrums, it actually moves so quickly that it gives the illusion of animation.

It seamlessly transitions through thousands of colors without drastically changing the overall color spectrum. It follows a specific sequence, smoothly moving from one color to another, something we as humans may struggle to do effectively.

Unlike your animation that switches between only 10 colors with noticeable changes, without the transition property, it won't appear as if each color switch has a delay. This is because the colors are limited in number and don't follow a cohesive color sequence.

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

Troubleshooting Issue with Custom WordPress Post Type and Function Not Showing Images or Post Information

Having trouble getting attachments from this particular post type to display within the function below. Instead of the URLs being set, blank boxes are showing up. I've been trying to make this function appear on the homepage, but I keep facing the sam ...

Incorporate validation features within a jQuery method

I am struggling with some HTML and jQuery code that generates links based on user input. HTML <input type="text" id="text" placeholder="Enter text" autofocus /> <a id="link1" class="btn btn-info" href="#" target="_blank"> Search 1 </a> ...

What is the best way to display items from top to bottom in React?

Currently, I am working with a list of objects structured in this way: const items = [{name: 'some name', count: 'how many of that name'}, ...] My goal is to display them in the following format: {items.map((item) => ( ...

Creating a designed pattern for a textbox: Let's get creative with your text

How can I create a Textbox that only allows numeric values or the letter 'A'? <input type="text" id="txt" name="txt" pattern="^[0-9][A]*$" title="Allow numeric value or only Letter 'A'&quo ...

How can I ensure that PrimeNG is functioning properly?

I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

Currently, I am working on a static website for my Computer Networks course. Students need to be able to download homework files in PDF format from the website. I have used embed tags to display the files online, but I'm facing an issue where the embe ...

Issue with the table background in Internet Explorer

My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

Conditionally assign a class to the body tag in your Jade template

Let's imagine I have a main template file called layout.jade and several files that extend this template - home, about, products, and more. Within the main template, I have structured it like this: body section.main-content b ...

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps: 1.) Begin by clicking on a category 2.) The filtered products will be displayed 3.) Select the desired products from the filter 4.) Once selected, the products will appear in the rightmost part of the screen within t ...

Having trouble verifying the selection option in Angular 6

I've been trying to implement Select option validation in Angular 6, but neither Aria-required nor required seem to be effective. The requirement is for it to display a message or show a RED border similar to HTML forms. Here's the HTML snippet ...

Can the keydown event have an impact on setInterval functionality?

I created a basic snake game using JavaScript and attempted to incorporate a new feature where var trail = []; var tail = 5; var normal_speed = 1000 / 10 var speed = 1000 / 10; var game_status = 0; var my_game; button.addEventListener("click", function ...

Customize the background color of a particular select element within an array of dynamically created select elements

I've been experimenting with jQuery to dynamically adjust the background color of a select element based on the chosen option. The select elements are being generated using the following code: while ($qrow = $qquery->fetch(PDO::FETCH_ASSOC)) { ...

Add a hovering effect to images by applying the absolute positioning property

On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part o ...

I'm currently facing some issues with switching my navigation bar on and off. I am utilizing the most recent version of Bootstrap, which is v5.1.3

Greetings! I'm new here and still learning the ropes, so please bear with me if I make some mistakes. I'm having an issue with my navbar-toggler not functioning as expected. I've tried various methods like adding older script sources and boo ...

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

What is the best way to automatically hide the Materialize CSS mobile navbar?

Recently, I completed a website called Link. Using only Materialize CSS, Vanilla JS, and plain CSS, I developed a single-page application that effectively hides and reveals different sections based on event listeners. Everything functions smoothly except ...