CODEWITHSUNDEEP
htmlcss
Ash
Ash

Reputation: 101

Css animation transition transform not working

I have three cloud icons and I am trying to move those using css animation transition. (animation transition transform keyframe) But looks like it's not working .I am not able to use some css property like position if I am using transition(transform)? Want to know the issue.

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

Upvotes: 0

Views: 79

Answers (1)

yinsweet
yinsweet

Reputation: 2851

The animation will work if you change the following CSS:

animation to animation-name

keyframe to 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>

Upvotes: 2

Related Questions