CSS前端动画

旧城等待， 2022-09-04 09:45 124阅读 0赞

### CSS动画（animation）结构： ###

@keyframes test {
                /* from或者0% */
                from{
    
    
                }
              /* 可以用，设置多个 */
                25%,50%,75%{
    
                }
                  /* to或者0% */
                to{
    
    
                }
                
            }

### 动画具体属性： ###

*  animation-name: ;动画名称，例如上面的test
 *  animation-duration: 0 s;动画运行时间，同过渡效果
 *  animation-timing-function: ;动画时序函数，同过渡效果
 *  animation-delay: ;动画延时，同过渡效果
 *  animation-iteration-count: ;动画执行次数，infinite永久执行
 *  animation-direction: ;动画执行的方向：
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td>normal</td> 
       <td>默认值，由from到to，每次都是</td> 
      </tr> 
      <tr> 
       <td>reverse</td> 
       <td>由to到from，每次都是</td> 
      </tr> 
      <tr> 
       <td>alternate</td> 
       <td>由from到to，再由to到from</td> 
      </tr> 
      <tr> 
       <td>alternate-reverse</td> 
       <td> <p>由to到from，再由from到to</p> </td> 
      </tr> 
     </tbody> 
    </table>
 *  animation-play-state: ;动画执行状态，running默认值，运行；paused，暂停
 *  animation-fill-mode: ;动画填充模式，
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td>none</td> 
       <td>默认值，动画结束回到原来的位置</td> 
      </tr> 
      <tr> 
       <td>forwards</td> 
       <td>动画执行完毕，动画留着执行的位置</td> 
      </tr> 
      <tr> 
       <td>backwards</td> 
       <td>动画等待时，元素处于开始位置</td> 
      </tr> 
      <tr> 
       <td>both</td> 
       <td>结合forwards和backwards，</td> 
      </tr> 
     </tbody> 
    </table>