How to set and trigger an css transition from JavaScript

Question

I'm new to html5, css and javascript, And mostly I've just been playing around. What I want to do is to set and trigger a transition of a div. After the page is loaded, I manage to do that by setting a transition. But that doesn't feel very dynamic and doesn't seem the right way to go. I am thankful for any help ```

Accepted Answer

The way you trigger transitions is to make an element match the CSS selector. The easiest way to do that is to assign your transition to a class, then add that class using Javascript. So in your example:

```
document.getElementById('dialPointer').classList.add('didLoad');
```

and your chosen element will animate. (I've used standards compliment Javascript for this, but it won't work on older browsers, so I'll leave it up to you to get that working).

To get it to animate on page load, put it in a load event:

```
window.addEventListener('load', function () {
    document.getElementById('dialPointer').classList.add('didLoad');
});
```

How to set and trigger an css transition from JavaScript

Solution

Problem