css转换不使用javascript

我正在尝试将图像从页面底部移动到顶部。我试着在一系列事件之后，比如fadeIn和fadeOuts，发生这种转变

以下是我的javascript：

//move the circles
$("#fullcircles").delay(1500).fadeIn();                                
//document.getElementById("fullcircles").style.display = "block"; 
$(".circlesfull").toggleClass("move-circle");

还有css

.circlesfull{
height:100%;
width: 100%;
position: relative;
left: 0px;
z-index: 1;
display: none;

-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
transition: top 2s;
top: 800px; 
}

/*trigger the moving of the circles*/
.move-circle{
    top:80px;
}

此代码不会设置过渡动画。它只是瞬间移动它

如果我在CSS中也这样做，它会正确地设置过渡动画

.content2:hover .circlesfull{
top:0px;
}

---

你能给我们一个到目前为止你所拥有的工作演示吗？您是否尝试过将

$.toggleClass（）

移动到

$.fadeIn（）

的回调中？您能给我们一个到目前为止的工作演示吗？您是否尝试过将

$.toggleClass（）

移动到

$.fadeIn（）

的回调中？