首页 前端知识 css动画(animation)常用属性

css动画(animation)常用属性

2024-02-28 10:02:26 前端知识 前端哥 544 889 我要收藏

                          

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种动画简写属性,顺序:动画名称,运行时长,运行曲线,延时,运行次数,运行方向规则

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2853.html
标签
css动画
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!