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?