Triggering CSS animation with JavaScript

Question

I have this html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="StyleSheet.css" rel="stylesheet" />
        <link href="animation.css" rel="stylesheet" />
        <meta charset="utf-8" />
    </head>
    <body>
    <div class="box box-anim-start box-anim-end"></div>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="JavaScript.js"></script>
</body>
</html>

As you can see there are two stylesheets linked to this page.

StyleSheet code

.box {
    height: 100px;
    width: 100px;
    background-color: red;
}

animation code

.box-anim-start {
}

.box-anim-end {
    transition-property: transform;
    transition-duration: 2s;
    transition-delay: 5s;
}

And here's the JavaScript code

var box = $(".box").eq(0);
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var rule0 = rules[0];
rule0.style.transform = "translateX(100px)";
var rule1 = rules[1];
rule1.style.transform = "translateX(0px)";

What I wanted was an animation upon opening this page. And, since the delay is mentioned in css, i thought that would work. But it didn't. Could you explain why?

why do you modify the style sheet rules via JS instead of setting the box-anim-end class via JS? — Johannes Jander
– Johannes Jander, Commented Jan 8, 2016 at 15:17
@JohannesJander this is just an example, isn't it? the value 100px is dynamic in my real program. — displayname
– displayname, Commented Jan 8, 2016 at 15:18
But the animation is triggered by setting the CSS class. Did you even try with translateX in the CSS and setting the class via JS? — Johannes Jander
– Johannes Jander, Commented Jan 8, 2016 at 15:21

Pixelomo · Accepted Answer · 2016-01-08 15:28:33Z

2

It's makes a lot more sense to define your CSS animation in your CSS using keyframes, you can then call it in by adding a class to your box once the page has loaded.

So initially remove the .box-anim-start class

<div class="box"></div>

Then define the animation using keyframes:

@keyframes slide {
  0%{ 
    transform: translate(0, 0)
  }
  100% { 
    transform: translate(100px, 0)
  }
}

Then call the animation within .box-anim-start

.box-anim-start {
  animation: slide ease-in 2s;
  animation-delay: 2s;
}

.box{
  transition: 2s ease-in;
}

And finally add the class once the page has loaded using jQuery

$(document).ready(function){
   $('.box').addClass('.box-anim-start');
});

answered Jan 8, 2016 at 15:28

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pixelomo Over a year ago

most likely but I've never done that before, what do you want to change? it's easier to create multiple keyframes animations and then you call them in by adding / removing different animations classes

gaetanoM · Accepted Answer · 2016-01-08 15:41:58Z

The best way is to use the stylesheet.

In Chrome, for instance, your line:

 var rules = sheet.cssRules || sheet.rules;

is wrong because rules is null. This happens because you need to change the index to

var sheet = document.styleSheets[0]; // instead of 1 in my case

But consider to put a delay between the two transition.

Instead, if you want simply use the js with your styles you can do:

$(function () {
  $('div.box').css('transform', 'translateX(100px)').delay(3000).queue(function (next) {
    $(this).css('transform', 'translateX(0px)');
    next();
  });
});

.box {
  height: 100px;
  width: 100px;
  background-color: red;
}
.box-anim-start {
}

.box-anim-end {
  transition-property: transform;
  transition-duration: 1s;
  transition-delay: 2s;
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="box box-anim-start box-anim-end"></div>

Collectives™ on Stack Overflow

Triggering CSS animation with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related