Question

我的网站http://www.words-by-design.co.uk上有一些div存在一个奇怪的问题。我正在使用一系列div，我称之为圆形，并用鼠标悬停动画。一般来说，它完全按照我的意愿工作。但是，偶尔，第一次加载网站时，div会在页面顶部以方块开始，然后缓慢移动到其起始位置，同时变为圆形。

我完全被难过了 - 任何建议都会受到赞赏！

以下是页面动画部分的HTML：

<div id='demoStrip'><div id='ballWrapper'>
    <div id='bounce' class='indexA'>
        <div class='ball' id='ball1'><p class='ballP'>Professional</p></div>
        <div class='ball' id='ball2'><p class='ballP'>Copy</p></div>
        <div class='ball' id='ball3'><p class='ballP'>For</p></div>
        <div class='ball' id='ball4'><p class='ballP'>Your</p></div>
        <div class='ball' id='ball5'><p class='ballP'>Needs</p></div>
    </div>
</div></div> <!-- End of demoStrip div -->

这是CSS：

/****************************
* Demo Strip and Animations *
****************************/

#demoStrip {
width: 960px;
height: 410px;
margin: 20px auto 0 auto;
/*background: #00cccc;*/
border-radius: 20px;
transition: all 4s;
}


#ballWrapper {
width: 900px;
height: 410px;
margin: 0 auto 0 auto;
}

.ball {
margin: 0 20px 0 20px;
border-radius: 200px;
background: #ffff99;
background-image: radial-gradient(circle closest-corner at center, #FFFF99 0%, #FFFF00     100%);
float: left;
box-shadow: 5px 5px 5px #333333;
/*transition: margin-top 4s 0.1s ease;*/
transition: all 4s 0.1s;
}

p.ballP {
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
margin: 0;
}

#ball1 {
width: 150px;
height: 150px;
margin-top: 245px;
}

#ball2 {
width: 140px;
height: 140px;
margin-top: 185px;
}

#ball3 {
width: 130px;
height: 130px;
margin-top: 125px;
}

#ball4 {
width: 120px;
height: 120px;
margin-top: 65px;
}

#ball5 {
width: 110px;
height: 110px;
margin-top: 5px;
}

#bounce {
height: 100%;
width: 100%;
}

#ball1 p {
line-height: 150px;
}

#ball2 p {
line-height: 140px;
}


#ball3 p {
line-height: 130px;
}


#ball4 p {
line-height: 120px;
}


#ball5 p {
line-height: 110px;
}

/******************
* Index Animation *
******************/

.indexA:hover  #ball1 {
margin-top: 5px;
}

.indexA:hover #ball2 {
margin-top: 65px;
}

.indexA:hover #ball4 {
margin-top: 185px;
}

.indexA:hover #ball5 {
margin-top: 245px;
}

非常感谢！

编辑：我在Chrome版本35 for Windows 7上看到此问题最多。

动画div正在屏幕上变形

0 个答案: