What are the steps to create a dynamic background color effect for an element?

I'm having trouble cycling through different colors or background images. The code I tried only runs once and doesn't loop as expected.

.landing-background {
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; }
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red; }
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; }
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red; }
}

Answer №1

It seems like you are using a browser other than Internet Explorer. Consider adding the following code:

-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */

Update:
Check out Can I Use: Css-Animation to see which browsers currently support css animations with prefixes. Most modern browsers now support this without the need for prefixes, but it's always good to stay informed. It is expected that by mid-2017, most users can safely remove the prefixes entirely.

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

Scrolling feature is not effective in lower resolutions

At resolutions lower than 1024x768, the browser scroll is not functioning correctly. If you look closely, you will see that when the resolution is smaller, the purple stripe is not fully visible. I also observed that the body is positioned at the top, whi ...

Utilizing different levels of `<div>` within the card-body component in Bootstrap5

While following a web application tutorial on YouTube, I encountered a question. The code snippet is shown below: <div class="card card-body"> ... </div> The resulting output is displayed in this image: https://i.sstatic.net/D3iBL.p ...

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

Divide the text array into pages within an HTML textarea using a loop

I am trying to implement pagination for an array where users can navigate using previous and next buttons or by specifying a position. When the index changes, I want the corresponding value to be displayed. Although I have attempted to achieve this with t ...

Is it beneficial to modify the title/alt attribute of an image for SEO purposes?

In my application, I utilize Angular and have implemented the ng-repeat directive for images. This means that in my HTML, I only have one img tag for all the image objects fetched from the server. Should I also include unique titles and alt tags for thes ...

Employing the HTML post method in conjunction with checkboxes

I am facing an issue while trying to use the HTML post function with PHP to insert a value of 1 or 0 into a database based on whether a user has checked a checkbox or not. Every time I submit the form, I encounter index errors regardless of the checkboxe ...

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

A beginning tag was identified, but another element of identical type was already in an active state

Hi there, I'm encountering three errors when attempting to validate my project. The errors are: 'An a start tag seen but an element of the same type was already open.', 'End tag a violates nesting rules.' and 'Cannot recover a ...

Having trouble with my HTML and PHP form submission. Can anyone help me figure out what's going on?

Hello, I'm in the process of creating a contact form for a website I'm currently working on, but I'm encountering some difficulties with properly configuring the syntax to send the form data to an email address. At the moment, I'm faci ...

Disorderly arrangement of HTML elements

I'm facing some issues with the page layout as I have to use a combination of tables and divs. The main problem arises with the footer and the div containing the table. Despite the fact that the footer is the last element inside the "main_container" i ...

Steps to retrieve the chosen value and visible text from a dropdown menu when clicking a button in Angular version 7

When the button is clicked, I want to display the selected text (green..) and value (1..) from a dropdown select. I attempted using ngmodel but was only able to capture the value, and an empty option is appearing in the select field. Below is the provide ...

Unable to concentrate on HTML input elements

TL;DR just click on this link I'm having a problem with my input elements - they seem to be on strike and not working properly. I've simplified the code to focus on the variables, and while I found some solutions that work, I believe there' ...

Retrieve the price of a span element based on the selected radio button using jQuery

I have a span with the class .amount, and now I want to extract the price from that span. $('.dimension-layer-dimension').click(function() { // Here is my JavaScript attempt var price4 = $(this).find('radio:checked').data(&apo ...

Creating secure online forms with password fields that incorporate jQuery functions for added functionality

I'm looking to enhance the security of my password entry field by requiring specific criteria: Both Password textboxes 1 and 2 must include an uppercase letter, a lowercase letter, a number, and special characters, and they should be between 8 to 30 ...

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

What is the best way to implement target="_blank" in an anchor tag using 'sanitize-html'?

In my current project, I am utilizing the sanitize-html library. Let's say I receive an email containing an anchor tag like this: this is to test something <a href="https://www.google.com/">open google</a> When this email shows up in my ...

Is it possible to restrict the date range in a vuetify.js v-text-field for entering dates?

Input the date in the text field below by hand, using the MM/DD/YYYY format. Is there a way to restrict the date to a specific range using datepicker validation rules? For example, can we prevent selection of years before 1919? If the selected date fall ...

The font-face feature is only functional in Chrome, not in Firefox or Opera

Hey there, I'm having an issue with the font-face element. It seems to work perfectly fine in Chrome, but doesn't seem to be working in any other browser. Any ideas on what could be causing this? Thanks in advance! Check out the demo here -> ...

Arranging text and images strategically

I am trying to position an image and text within separate containers using div. The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div. Can you provide as ...