Start CSS-Transition with JavaScript

Question

I read 5 tutorials about how to start a CSS-Transition with JavaScript, but it doesn't work. I'm using Safari. Here's my Code:

<html>
<head>
<title>Test</title>
<style type="text/css">
    #test{
        width: 100px;
        height: 100px;
        background-color: aqua;
        transition: width 3s linear;
    }
</style>
<script type="text/javascript">
    function test(){
        document.getElementById('test').style.width = 200+'px';
    }
</script>
    </head>
    <body>
      <div id="test">
      </div>

      <button onclick="test()">Los</button>
    </body>
    </html>

it works if you use the correct vendor prefixes.

zzzzBov
– zzzzBov

2013-01-17 18:10:06 +00:00
Commented Jan 17, 2013 at 18:10 — zzzzBov
– zzzzBov, Commented Jan 17, 2013 at 18:10
What does "it doesn't work" mean?

Markus
– Markus

2013-01-17 18:19:34 +00:00
Commented Jan 17, 2013 at 18:19 — Markus
– Markus, Commented Jan 17, 2013 at 18:19

Musa · Accepted Answer · 2013-01-17 18:12:03Z

3

You may need to use vendor prefixes, safari uses webkit so try addind the -webkit- prefix.

<style type="text/css">
    #test{
        width: 100px;
        height: 100px;
        background-color: aqua;
        -webkit-transition: width 3s linear;
        -moz-transition: width 3s linear;
        transition: width 3s linear;
    }
</style>

DEMO

edited Jan 17, 2013 at 18:12

answered Jan 17, 2013 at 18:03

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Collectives™ on Stack Overflow

Start CSS-Transition with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related