我用过translate()的动画。代码链接在这里Bouncy animation
但它突然从底部开始。如何给它一个顺利的开始。还要注意动画在两者之间扭曲。如何消除此类错误？
代码如下:
body{background: #92348A;
font-family:'Helvetica Neue',Arial, Helvetica, sans-serif;}
.wrapper{ margin-left:370px;
margin-top:195px;
position:absolute;
}
p{ font-family: "Comic Sans MS", cursive;
font-weight:900;
}
.one{width:50px;
height:50px;
float:left;
margin:0.5em;
position:relative;
border-radius:100%;
background: #F00;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.2s infinite ;
}
.two{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #9D1A76;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.38s infinite;}
.three{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0080;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.3s infinite;}
.four{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.35s infinite;}
.five{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0ECAF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.23s infinite;}
.six{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0BF451;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.1s infinite;}
.seven{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #645CF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.14s infinite;}
@-webkit-keyframes bounce{
2%{ transform: translateY(120px);}
50%{ transform:translateY(-90px);}
100%{ transform:translateY(120px);}
}<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>最佳答案
@harcos 的回答是正确的，但没有一个顺利的开始。
添加 transform:translateY(-90px);
到所有不同的动画类，以便它们在动画开始的地方呈现。
body {
background: #92348A;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.wrapper {
margin-left: 370px;
margin-top: 195px;
position: absolute;
}
p {
font-family: "Comic Sans MS", cursive;
font-weight: 900;
}
.one {
width: 50px;
height: 50px;
float: left;
margin: 0.5em;
position: relative;
border-radius: 100%;
background: #F00;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.2s infinite;
}
.two {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #9D1A76;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.38s infinite;
}
.three {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0080;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.3s infinite;
}
.four {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.35s infinite;
}
.five {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0ECAF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.23s infinite;
}
.six {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0BF451;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.1s infinite;
}
.seven {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #645CF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.14s infinite;
}
@-webkit-keyframes bounce{
0%{ transform:translateY(-90px);}
50%{ transform:translateY(120px);}
100%{ transform:translateY(-90px);}
}<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>关于html - 如何在CSS中制作流畅的动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28608008/