Manipulating CSS animations using JavaScript

Question

Manipulating CSS animations using JavaScript

Recently, I've been working on a basic keyframe animation. The animation is set to blink truck lights:

animation: blink-truck-lights .4s 8s 10s steps(2) 2 forwards;
@keyframes blink-truck-lights {
 from{background-position: 0px 0;}
 to{background-position: 0px -250px;}
}

Next, let's take a look at the JavaScript portion:

setInterval(function(){
 $('#truck').addClass('blink-truck-lights');       
},500);

setInterval(function(){
 $('#truck').removeClass('blink-truck-lights');       
},800);

My goal is to make this animation play over a specific interval of about 8 seconds. Initially, I thought of adding and removing the class with the animation syntax, but when I attempted to use setInterval for that purpose, the animation didn't start as expected.

javascript jquery css

Answer 1

Answer №1

You have the option to achieve this using solely CSS.

#id {
  -webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}

LINK

UPDATE 2:-------------------------------------------------------------------------

If you prefer a Javascript solution, here it is:

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

setInterval(function(){
blink();
},8000)

To implement the animation in CSS:

      @keyframes 'blink' {
     //your code for animation
                         }

    //try moz for mozilla,o for opera and webkit for safari and chrome 
        .blink_css {
            -webkit-animation-name: blink;
            -moz-animation-name: blink;
            -o-animation-name: blink;
            animation-name: blink;
                   }

        .animated {
            -webkit-animation-duration:8s;
            -moz-animation-duration:8s;
            -ms-animation-duration:8s;
            -o-animation-duration:8s;
             animation-duration:8s;
                  }

UPDATE 3:-------------------------------------------------------------------------

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

Simply add or remove this class as needed. Hopefully, this information will be helpful. Cheers!!!

Answer 2

You have the option to achieve this using solely CSS.

#id {
  -webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}

LINK

UPDATE 2:-------------------------------------------------------------------------

If you prefer a Javascript solution, here it is:

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

setInterval(function(){
blink();
},8000)

To implement the animation in CSS:

      @keyframes 'blink' {
     //your code for animation
                         }

    //try moz for mozilla,o for opera and webkit for safari and chrome 
        .blink_css {
            -webkit-animation-name: blink;
            -moz-animation-name: blink;
            -o-animation-name: blink;
            animation-name: blink;
                   }

        .animated {
            -webkit-animation-duration:8s;
            -moz-animation-duration:8s;
            -ms-animation-duration:8s;
            -o-animation-duration:8s;
             animation-duration:8s;
                  }

UPDATE 3:-------------------------------------------------------------------------

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

Simply add or remove this class as needed. Hopefully, this information will be helpful. Cheers!!!

Answer 3

Answer №2

Here's a simple method to achieve the same effect without relying on animationEnd or animationStart events. All you need to do is toggle a CSS class on the target element and specify the interval for the animation to restart.

setInterval(function(){$('#car').toggleClass('blink-car-lights')},10000);

Now, watch as the car lights blink every 10 seconds like clockwork.

Answer 4

Here's a simple method to achieve the same effect without relying on animationEnd or animationStart events. All you need to do is toggle a CSS class on the target element and specify the interval for the animation to restart.

setInterval(function(){$('#car').toggleClass('blink-car-lights')},10000);

Now, watch as the car lights blink every 10 seconds like clockwork.

Manipulating CSS animations using JavaScript

Answer №1

Answer №2

Similar questions

Is the event loop blocked by setTimeout() in Node.js?

Issue: Unable to assign type 'FormDataEntryValue' to type 'string'. Type 'File' cannot be assigned to type 'string'

Ajax pagination does not update the currently active link

Reposition UVs in Vertex Shader to maintain texture integrity without causing distortion

Instructions on keeping a numerical counter at its current value for all site visitors

If the desktop website is zoomed in beyond 150%, it will automatically switch to mobile responsive mode

Dismiss MUI Snackbar notification and execute action upon pressing a key

Tips for adjusting the border radius of a dropdown box on a Bootstrap website within the CodeIgniter framework

When Vue.js is compiled, it removes a script tag

save information in javascript variable using JSON syntax

Troubles with Angular elements not aligning correctly when using the "display: block" property

Struggling to make the image adapt to mobile screen sizes, even after applying a width of 100% and

Session values do not persist in Window Popups

Bootstrap modal fails to appear on the screen

What is the best way to make an element "jump to the top" when the parent element has reached its maximum height?

How can I use jQuery to save different types of files like pictures and PDFs as 'mediumblob' in a MySQL database?

Looping through properties of objects with the help of angularJS ng-repeat is known as using objects['propertyname&#

Why does my AJAX request keep returning a 500 internal error in Laravel?

What is the best way to define a color for a class in Vue?

What is the best way to center card-columns on a webpage while using bootstrap version 4.3.1?