Ensuring a @keyframe animation remains constant for the entire duration of the user's visit to the webpage using CSS

How can I create a continuous @keyframe animation that stays active for the duration of the user's visit to my webpage?

I've implemented several color animations on my website, each with a specific duration. Is there a way to make these color changes last throughout the entire browsing session?

Below is my current CSS code:

@keyframes goldwhite {
    0%   {color: white;}
    80%  {color: gold;}
    100%   {color: white;}
}

#bannerleft { 
    animation: goldwhite infinite;
    -webkit-animation: goldwhite infinite;
    position: absolute;
    margin-top: -2.3%;
    font-size: 13px;
    color: white;
    width: 130px;
    left: 18%;
    font-weight: 600;
}

If possible, how do I modify this animation to be ongoing?

Another question I have is regarding creating a text effect similar to the 'Slide to unlock' feature on the Apple IOS 7 lock screen, where the text transitions from gray to silver. The effect can be seen at around 10 seconds in the video linked below:

http://www.youtube.com/watch?v=8ix7HnH_6cQ

Is it possible for this effect to repeat or occur every 5 seconds?

Thank you for your assistance.

htmlcss

Answer №1

To achieve this, you will have to utilize javascript/jquery.

After the animation completes, you can detect the event and reset the class. Here is an example:

$("#MyDiv").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", 
    function ()
    {
        $(this).removeClass("bannerleft");
        $(this).addClass("bannerleft");
    });

Keep in mind that the usage of animation end events may require restructuring the animation code into a separate class.

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

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

javascriptjquerycsshtml

What is the best method for retrieving text from the aria-label attribute?

Currently, I am delving into the world of web scraping. My goal is to extract the work-life balance rating from the Indeed website. However, the main obstacle I'm encountering is the extraction of text from the aria-label attribute so that I can retri ...

htmlcssseleniumweb-scrapinggetattribute

What is the strategy used by jQuery to select elements by class name?

Is there a "getElementsByClass" function in JavaScript? If not, how does jQuery manage to do it without looping through all elements which would be very inefficient? Also, how can I specify CSS for elements with two or more classes? <a class="one two ...

jquerycssdom

formula for an arbitrary velocity vector

In the game I'm developing, I want the ball to move in a random direction on the HTML canvas when it starts, but always with the same velocity. The current code I have is: vx = Math.floor(Math.random() * 20) vy = Math.floor(Math.random() * 20) Howev ...

javascripthtmlphysics

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

htmldjangodjango-views

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

javascriptjqueryhtmlcssanimation

Determining the file path in HTML5

Can anyone help me with retrieving the file path using html5 javascript once a user selects a file? I require the file path for a specific scenario: In this case, the user uploads a file and pauses it (currently only supported by Mozilla browsers), then c ...

phpjavascripthtml

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

javascriptjqueryhtmlmultiple-select

What is the best way to create an interactive menu icon that includes dropdown options using MUI menu features?

i am looking to create a component similar to this currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" }}> <Tooltip title ...

cssreactjsmaterial-uipopup

The content has spilled over from the div and leaked into the adjacent div

When the left div's content exceeds the right div's, it spills over into the next container div. Sample HTML: <div class="musictemplate_container"> <div class="musictemplate_left"> something<br> omething< ...

htmlcss

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...

jquerycss

Creating an HTML table from dynamic JSON data - A comprehensive guide

I am in need of a solution to transform JSON data into an HTML table format quickly and easily. Can anyone provide guidance on effectively utilizing PartialView to recursively render tables, ensuring that most details are visible? ...

c#htmljsonasp.net-mvc

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

Choose your options effortlessly with CSS or JavaScript dropdown menus

As a novice web developer, I am contemplating whether dropdown menus are more suitable to be coded in CSS or JavaScript. What are the advantages and disadvantages of each approach? ...

javascriptcss

The Add/Remove button functionality is not functioning as expected for duplicated form fields when using jQuery

I am experiencing an issue with the functionality of the "Add another" and "Remove row" buttons in my form. I implemented code from a specific Stack Overflow answer (jquery clone form fields and increment id) to create a cloneable section, but only the ori ...

javascriptjqueryhtmlclone

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

I have encountered an unusual issue in my Angular 13 + Bootstrap 5 application. When accessing a scrollable page on small screen devices, the scrolling function does not work properly and causes the page to flicker. I observed that this problem does not o ...

htmlcssangulartwitter-bootstrap

Hovering over an element will change its background color along with adjusting the background

I encountered a situation with the following code: CSS: <style> div.testy { border:1px solid black; } div.testy:hover { background-color:red; } </style> HTML: <div class="testy" style="height:100px; back ...

htmlcsshoverbackground-color