css动画(animation)常用属性

                          

1.animation-name:动画名称
                                    
 2.@keyframes:动画定义,后面跟动画名称
                                    
3.animation-duration:动画持续时长,单位(s)
                                    
 4.animation-delay:动画延时生效,单位(s);可为负值,当为负值时候,应解读为已播放n秒
      如:-2s表示动画已播放2s,从2s后开始播放
                                    
 5.animation-iteration-count:动画运行次数,参考值有:infinite(无限循环)
                                    
 6.animation-direction:动画运行方向规则:参考值有:
    ① normal(正常播放,默认值),
    ② reverse (反向),
    ③ alternate (先正向,后反向,交替),
    ④ alternate-reverse(先反向,后正向,交替)
                                      
  7.animation-timing-function:动画运行曲线,参考值有:
      ① ease :慢-快-慢
      ② linear :匀速运动
      ③ ease-in:慢进
      ④ ease-out:慢出
      ⑤ ease-in-out :慢进慢出    
      ⑥ cubic-bezier(n,n,n,n):用贝塞尔函数自定义动画运行曲线                                

8.animation-fill-mode:动画填充模式:
     ① none :默认值,不应用任何样式
     ② forwards :应用动画最后一个关键帧的样式值
     ③ backwards:应用动画第一个关键帧的样式值,并在动画延迟期间保留该值。
     ④ both 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性
                                      
9.animation-play-state:动画运行或者暂停
    ① paused:暂停
    ② running:播放
                                      
10.animation:集合6种动画简写属性,顺序:动画名称,运行时长,运行曲线,延时,运行次数,运行方向规则

你可能感兴趣的:(css,动画,css3,前端,vue)