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

Question

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.

html css

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

Colorbox: Display a specific section from a separate HTML page

Is utilizing unregistered HTML elements for semantic purposes considered poor practice?

Guide to positioning an anchor tag in the middle of a container, ensuring the anchor fills the entire space of the container

Ways to attach an item using its lower point instead of its upper coordinate

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Does anyone have any insights into the technology that powers Twiddla's browsing features?

Table formatting problem

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Enhancing Tapestry Grid component column sort icons

Tips for creating a static PHP website with a fixed navigation bar and footer

"Enhancing webpage dynamics with jQuery: Exploring the

Struggling with getting the local slick slider to run smoothly

Adding an additional border when combining two divs with rounded borders

Animating transitions on a dynamic Bootstrap navbar using jQuery

Tips for showing more rows by clicking an icon within an Angular 2 table

What is the best way to style a tiled design using CSS?

Using Modernizr to determine the presence of nth-child in a test

Are we utilizing this JavaScript function properly for recycling it?

The component's div does not respond to the max-width attribute

Ways to show buttons as inline or block elements when a single button is enclosed within a form