JS、JQueryを書くと親要素のCSS（Transition,Transform）が適用されない件

標題の通り、下記HTMLとCSSを記述した上でJQueryやJSのscriptタグを記入すると、parentクラスのtransitionとtransformが動作しなくなってしまいます。

JS,JQueryを記述した状態でparentクラスを削除するとchildクラスで指定したcssが正しく表示されます。

JS,JQueryとCSSのアニメーションの動作が相反して表示されなくなる、といったことなのでしょうか。

parantクラスで指定したアニメーションの動作を保ちつつ、JS,JQueryを記述するためにご教示いただけますと幸いです。

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>

CSS

body {
width: 100%;
height: 100vh;
}

.parent {
transform:translateY(100vh);
transition-duration: 8s;
transition-timing-function: linear;
}

.child {
height: 60px;
width: 60px;
border-radius: 30px;
background-color: black;
}