Preserve current color during CSS keyframe animation transitions

I am currently working on developing a dynamic 'hinting' system. I am trying to figure out a way to make an element blink using only CSS, but I'm not sure if it's even possible. In the past, I believed that you needed to define the beginning and ending colors of your animation, but I have since learned that this is not true., Since I want this to work on multiple background colors, that isn't an option for me.

I've experimented with various options and searched Google (inherit, currentColor etc.), but all I have achieved so far is transitioning from white/transparent to #ef9633.

Does anyone have any suggestions or alternative solutions that I could try?

Code:

@keyframes nk-hint {
    0% { background-color: #XXX; }
    50% { background-color: #ef9633; }
    100% { background-color: #XXX; }
}
@-webkit-keyframes nk-hint {
    0% { background-color: #XXX; }
    50% { background-color: #ef9633; }
    100% { background-color: #XXX; }
}

Thank you in advance!

csscss-animations

Answer №1

I was pleasantly surprised to find that the solution was much simpler than expected. By just removing the 0% and 100%, the code works perfectly on all major browsers. I still need to test it on iOS and IE though.

It seems unnecessary to specify a beginning and/or ending color.

@keyframes nk-hint {
    50% { background-color: #ef9633; }
}
@-webkit-keyframes nk-hint {
    50% { background-color: #ef9633; }
}

Answer №2

animation-fill-mode is a great option for achieving your desired effect, but keep in mind that it may not be compatible with older versions of IE (less than 9). Check out this resource for more information: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

If you require support for IE 9, then using Javascript for the animation might be your best bet.

Answer №3

Alright, you have the option to implement the modifications outlined below.

.your-selector {
    background-color: red;
    -webkit-animation: nk-hint 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;  /* Chrome, Safari, Opera */
    animation: nk-hint 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes nk-hint {
    0% {background-color: #XXX;}
    50% {background-color: #ef9633;}
    100% {background-color: #XXX;}
}

@keyframes nk-hint {
    0% {background-color: #XXX;}
    50% {background-color: #ef9633;}
    100% {background-color: #XXX;}
}

The keyframes will not change.

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

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box

substituting symbols with colorful divs

I'm looking to add some color to my text using specific symbols. (), ||, and ++ are the symbols I'm using. If a text is enclosed in | symbols, it will appear in blue, and so on... Here is the code in action: const text = "|Working on the| i ...

javascripthtmlcss

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

javascriptjqueryhtmlcss

Using float instead of CSS inline-block is more effective for styling a PHP element

I've been working on styling a page that was generated with App Gini. While I have been successful in editing most elements so far, I am facing an issue with getting inline-block to work properly. Although float:left is functioning correctly, I would ...

phphtmlcss

My online platform appears fine across all browsers except for Firefox

It seems that different browsers are displaying my website differently. Chrome, Safari, and Opera show it without any issues, but Firefox removes the top section, including the menu, and replaces it with white space in the center. I'm not sure what&ap ...

htmlcssfirefoxbrowsercross-browser

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

In what way are these columns altering their layout without the use of JavaScript?

While I was searching for a solution to organize content based on screen size, I came across this website. The layout of the site changes depending on the size of the browser window. When I resize my browser or view the site on a phone, the large image at ...

javascriptjqueryhtmlcss

Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com The goal is to conceal a specific div only when the user is on secondsite. The access to the HTML is limited, but there is an option to ...

javascripthtmlcss

Issue with the JQuery Lightbox 2 Plugin

I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...

jquerycsspluginslightboxlightbox2

Customize Bootstrap 5: Changing the default color scheme

Currently, I am utilizing Bootstrap 5 (v5.2.1) along with a form on my website. I am attempting to customize the default styles for form validation. Specifically, I want to modify the colored 'tick' or 'check' icon that is displayed wh ...

cssbootstrap-5

Toggle class in Angular ngMessages based on validity, not just on error

As a beginner with ngMessages, I'm curious to know if there is a $valid counterpart for the $error object. In my exploration of the ngMessages documentation in Angular, I have only encountered discussions about the $error object. <form name="conta ...

cssangularjsformsvalidation

Moving Text Over a Static Background Image in HTML and CSS

Currently working on developing a website that involves coding in HTML and CSS. However, I've encountered an issue while programming. Whenever I attempt to adjust the positioning of my text, the background image shifts along with it, making it impossi ...

htmlcss

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...

javascripthtmlcss

JavaScript function to toggle visibility and scroll back to top of the page

I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing. There are two DIVs in my code that I toggle between showing and hiding using Javascr ...

javascriptjqueryhtmlcssshow

What is the most efficient way to substitute text within an HTML document?

Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this? This code snippet only changes text in the first div. Is there a way to implement a ...

javascripthtmlcss

What steps do I need to take in order to change an HTML div's background to a black

My current project involves dynamically loading HTML content stored on disk into a specific div element. This is achieved by using the following code: $('#FictionContent').load('Content/HuckFinn.html'); Just to provide some background ...

jqueryhtmlcssvisual-studiowebmatrix-3

In IE8, CSS classes assigned to HTML5 elements are removed when they are printed

Currently, I am facing a challenge where I need to ensure proper printing functionality in IE8. The issue arises when using HTML5 features (such as sections) along with CSS on a page - the problem occurs specifically during printing. For example, when tryi ...

csshtmlprintinginternet-explorer-8preview

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

Although I have a good understanding of CSS and HTML, my knowledge of Javascript is limited. I am looking to add an interactive element to my website where an image enlarges gradually when clicked and smoothly moves to the center of the screen in one con ...

javascripthtmlcss

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

javascriptjqueryhtmlcss

Text in gray overlaying image background

I am attempting to design a layout that resembles the following: https://i.sstatic.net/S5CCK.jpg Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. ...

htmlcsssvgcss-shapes