CSS transition włacza się samo po odświeżeniu Firefox

pytanie zadane 29 lipca 2017 w HTML i CSS przez MkbewePP Początkujący (330 p.)

Hej,

mam dziwny problem z transition na prostej stronie, a mianowicie przy odświeżaniu w Firefoxie włącza się do rodzica którym jest body (div powoli zmienia kolory i sią zaokrągla a powinnien taki być odrazu). Przy włączani transision za pomocą hovera działa normalnie natomiast przy aktywacji za pomocą przycisku oskryptowanego w jQuery już nie. Co ciekawe wystarczy że w body są same znaczniki <script> i już źle działa. Co prawda jak linka z jQuery umieszczę w headzie to działa dobrze natomiast ciekawi mnie dlaczego w ogóle coś takiego się dzieje. Może ktoś coś wie Wrzucam kod żeby można zobaczyć o co dokładnie chodzi:

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <title>Animacja w transition i wstep do jquery</title>

        <link rel="stylesheet"  href="css/style.css">

    </head>
    <body>
        <div class="d"></div>
        <div class="circle"></div>
        <button >Zakręć</button>

           
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script>

            $('button').on('click',function(){
                $('.circle').toggleClass('active');
            })
        </script>
    </body>


</html>

body{
    background-color: pink;
    
}

.circle {
    width: 500px;
    height: 500px;
    background-color: white;
    border-radius: 50%;

    border-bottom: 120px solid red;
    border-left: 120px solid orange;
    border-right: 120px solid blue;
    border-top: 120px solid green;

    margin: 0 auto;
    transition: all 5s ease;
}


.circle.active{
     
    transform: rotate(3600deg);
    
    border-bottom-color: yellow;
    border-left-color: darkgreen;
    border-right-color: cadetblue;
    border-top-color: crimson;
    background-color: black;

}

button{
    background-color: brown;
    color: white;
    width: 200px;
    height: 30px;
    display: block;
    margin: 20px auto;
    border: none;
}