如何在CSS中制作流畅的动画？

Aishwarya R 发表于 Dev

艾西瓦娅·R

我已经使用了transform（）的动画。代码的链接在这里Bouncy动画

但是它突然从底部开始。如何给它一个顺利的开始。还要注意动画之间的扭曲。如何清除这种错误？

代码如下：

	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>