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

Question

我用过translate()的动画。代码的 link 在这里 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>

Answer 1

@-webkit-keyframes bounce{
    0%{ transform:translateY(-90px);}
    50%{ transform:translateY(120px);}
    100%{ transform:translateY(-90px);}
}

Answer 2

@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>

Answer 3

 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>

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

How to make smooth animation in css?

html

css

animation