Animating unvisited links with CSS

I have noticed that I am able to apply CSS color to unvisited links, but for some reason, I can't seem to do the same for CSS animations in Firefox and Chrome. Is this a limitation of the browsers or am I missing something? In the code snippet below, both visited and unvisited links are animated.

Check out the example here

@keyframes highlight {
    0% {
        background: #38c;
    }
    10% {
        background: none;
    }
}
a:link {
    color: red;
    animation: highlight 4s infinite;
}

NOTE: After considering Mr Lister's feedback, I attempted to set the color individually and place the animation in the parent element. This approach seems to work for changing the color, but not for altering the background-color (tested on Firefox 31): View the updated example here

Answer №1

Despite my efforts, I was unable to make background-color function as expected. However, a workaround is using border-color and color:

http://jsfiddle.net/p7Bc5/21/

@keyframes highlight {
    0% {
        color: #38c;
    }
    10% {
        color: red;
    }
    100% {
        color: red;
    }
}
a:visited {
    color: green;
    border-style: solid;
}
a:link {
    color: inherit;
    border-style: solid;
}
.wrapper {
    animation: highlight 4s infinite;
}

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

Restrict modifications in Sharepoint 2013 to text only

Can content editors be restricted to only adding text on websites? I want to prevent them from using inline styling in HTML or buttons in the editor to add styles. I'm dealing with a few rebellious editors who like to get creative with colors and sty ...

The responsiveness of the bootstrap mobile view is experiencing some technical difficulties

https://i.sstatic.net/IuQXa.pngUsing Bootstrap 4 in my project and I have implemented the following bootstrap codes with an external CSS file in the HTML view, <div class="jumbotron rounded-0"> <div class="container"> &l ...

Manipulate form fields via jQuery in Django to dynamically hide or show them based on certain

I am currently working on creating a universal method to manage the display and hiding of specific fields based on checkboxes. In many of my projects, I encounter forms that include checkboxes where certain fields are associated and will appear or disappea ...

The CSS listings in the unordered list using the inline-block property are misaligned

My unordered list (ul) and list items (li) have a display set to inline-block. Each li contains an image and a div positioned below the image. The lis do not align in the same row when the divs vary in height. Here is a sample image for reference: ...

Develop a selection tool based on certain column information - utilizing JavaScript

I'm currently working on a table with a large amount of data, and I'd like to implement a select option for filtering. While I have successfully added the filter with the select element, my concern is how to dynamically populate the options witho ...

What Are Some Tips for Making This CSS Transition Work?

Currently experiencing a CSS transition issue related to scrolling. The problem arises when the user scrolls down, causing a class to be added to the header element in order to hide it by setting the "top" property to a negative value. However, upon scroll ...

place another ionic3 button adjacent to the existing one

I was looking to position a button next to another one, rather than below it <ion-row> <span *ngIf="dado.status == 0" style="margin-left: 50%"> Pending </span> ...

What is the best way to manage images within input fields using React?

I'm currently working on a custom Reactstrap component. My goal is to have an image displayed within the input field, like this: https://i.sstatic.net/2QXEf.png However, what I am experiencing is not what I expected: https://i.sstatic.net/WbEeW.png ...

Aligning object in middle of a responsive image using Bootstrap

I'm having trouble centering a button on an image using responsive design techniques. I am currently utilizing Bootstrap 3 and have attempted to use CSS margin properties to center the button, but this method is not ideal especially on smaller screens ...

Tips on making a material-ui grid fill up the entire screen

Currently, I am working on developing a layout that resembles most editor/IDE setups using material-ui and react. In this layout, I have a top bar, a bottom bar, side panels on both sides, and a center area. My main concern is how to ensure that this grid ...

Edge fails to verify if the HTML document has been modified

Encountering an issue where Edge does not seem to be properly checking for changes in an HTML document, unlike Firefox and Chrome. Despite updating the document, Edge continues to display the old version of the page while Firefox and Chrome show the update ...

Does CSS give preference to max width specifications?

Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below: <div class="wrap"> <div class="one">Hi</div> <div class="two">my secon ...

Two lines of pictures (an odd amount of images)

I need help creating 2 rows of images with 5 images in total:      Image Image Image Image Image How can I center the first row properly? Currently, my layout looks like this: Image Image Image Imag ...

Could there possibly be a glitch in the way ASP.NET is interpreting the User-Agent for customized versions of Firefox?

When examining the user agent string Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729) The value of HttpContext.Current.Request.Browser.MajorVersion is 3, and the value of HttpContext.Current.Reques ...

Access the value of a variable passed from the view to the controller

Is there a way to retrieve a dynamically generated value from the view to the controller in AngularJS? <ng-option ng-repeat="w in details track by $index"> <div class="program-grid-row table-row" > <div> <a class= ...

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text. Here is how it appears on desktop: [![enter image description here][1]][1] This is the current mobile view (the image is ov ...

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

Utilizing a preset canvas for the renderer can lead to issues

As I dive into tutorials on three.js, I encounter a challenge when using my predefined canvas elements for the renderer. Everything works smoothly if I let three.js create the renderer DOM element. However, when I attempt to retrieve the canvas using getEl ...

The lower half of the screen is missing when viewed on mobile devices

On a particular page of our website, the content on the right side seems to be hidden. Can anyone explain why this might be happening and provide suggestions on how to fix it? Thank you. <div id="responsivearea" style="margin-top: -23px; padding-top: ...