Css动画过渡变换不起作用答案

【问题标题】：Css animation transition transform not workingCss动画过渡变换不起作用
【发布时间】：2020-10-18 01:01:24
【问题描述】：

我有三个云图标，我正在尝试使用 css 动画过渡来移动这些图标。（动画过渡变换关键帧）但看起来它不起作用。如果我使用过渡（变换），我无法使用一些 CSS 属性，如位置？想知道问题。

**<style>**
     #i1{
         top:30px;
         left:100px;
         font-size:200px;
         color: lightskyblue;
         position: absolute;
         animation: cloudmotion;
         animation-duration: 10s;
         animation-iteration-count: 2;
         animation-timing-function: ease-in;
         }                              
                    
     #i2{
           top:50px;
            left:340px;
            font-size:100px;
           color: lightskyblue;
           position: absolute;
           animation: cloudmotion;
            animation-duration: 10s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
           }
                 
                    
       @keyframe cloudmotion{
            0%{
               transform: translateX(0px);
                    color:gray;
               }
            50%{
                             
               transform: translateX(200px);  
               }    
                        
            100%{
              transform: translateX(1220px);
               }
                    
        
 **</style>**
        
        
        
  **<body>**
        <i id="i1" class="fa fa-cloud" aria-hidden="true"></i>
        <i id="i2" class="fa fa-cloud" aria-hidden="true"></i>
        <i id="i3" class="fa fa-cloud" aria-hidden="true"></i>
  **</body>**

【问题讨论】：

可以提供代码吗？
请告诉我们你做了什么..
请输入代码....？

标签： html css

【解决方案1】：

如果您更改以下 CSS，动画将起作用：

animation 到 animation-name

keyframe 到 keyframes

#i1 {
  top: 30px;
  left: 100px;
  font-size: 200px;
  color: lightskyblue;
  position: absolute;
  animation-name: cloudmotion;  /* change animation to animation-name */
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in;
}

#i2 {
  top: 50px;
  left: 340px;
  font-size: 100px;
  color: lightskyblue;
  position: absolute;
  animation-name: cloudmotion; /* change animation to animation-name */
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in;
}

@keyframes cloudmotion {  /* change keyframe to keyframes */
  0% {
    transform: translateX(0px);
    color: gray;
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(1220px);
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <i id="i1" class="fa fa-cloud" aria-hidden="true"></i>
  <i id="i2" class="fa fa-cloud" aria-hidden="true"></i>
  <i id="i3" class="fa fa-cloud" aria-hidden="true"></i>
</body>

【讨论】：