CSS transition not working in chrome

Question

Hi! I'm a bit new so please bear with me if this is out of context or a bit long.

I was trying to create a simple game, the first part of which was to animate the ball movement inside of a box depending on where it hits.

I am not able to work with the transitions in CSS (I have checked in Chrome and Safari). I have put in the relevant prefixes for browser supper and I am checking for "transitioned" state in event listener. From the console logs, I don't find it happening.

My html code is below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simple game</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div id="canvas">
            <div id="ball"></div>
        </div>
        <button type="button">Start animation</button>
    <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

Relevant CSS snippet:
#ball{
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 100%;
    background-color: blue;
    position:absolute;
    -webkit-transition: left 1s ease-in-out, top 1s ease-in-out;
    -moz-transition: left 1s ease-in-out, top 1s ease-in-out;
    -o-transition: left 1s ease-in-out, top 1s ease-in-out;
    transition: left 1s ease-in-out, top 1s ease-in-out;
    top:300px;
    left: 0px;
}

Relevant javascript snippets :

var ball = document.querySelector("#ball");
var button = document.querySelector("button[type=button]");

//add mouse click event listener to button. Call initialize when clicked
button.addEventListener("click",initialize,false);

//add transitionend event listener to ball. Call pathdecider
ball.addEventListener("transitionend",pathdecider,false);

Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

Avinash Pandit

Avinash Pandit

CSS transition not working in chrome