动画
transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的;而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。
动画的实现步骤
-
定义动画:用关键帧声明动画
关键帧的语法是以@keyframes开头,后面紧跟着动画名称animation-name。from等同于0%,to等同于100%。百分比跟随的花括号里面的代码,代表此时对应的样式
语法:
@keyframes animation-name { /* 开始状态 */ frome {} /* 结束状态 */ to {} } @keyframes animation-name { /* 开始状态 0%不可以省略百分号*/ 0% {} n% {} /* 结束状态 */ 100% {} } 注意:
- 百分比顺序不一定非要从0%到100%排列,最终浏览器会自动按照0%-100%的顺序进行解析
- 如果存在负百分数或高于100%的百分数,则该关键帧将被忽略
- 如果0%或100%不指定关键帧,将使用该元素默认的属性值
- 若存在多个相同animation-name的@keyframes,浏览器只识别最后一个@keyframes里面的值
- 空的keyframes规则是有效的,它们会覆盖前面相同animation-name的有效关键帧规则
-
使用动画:animation调用动画
语法:
animation: name duration timing-function delay iteration-count direction fill-mode; animation: 动画名 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
动画属性值
/* 调用动画的名称 */ animation-name: move; /* 动画播放时长 */ animation-duration: 1s; /* 动画重复播放次数 默认1次 infinite:无限循环播放*/ animation-iteration-count: infinite; /* 动画延迟多久才开始播放 默认0s*/ animation-delay: 1s; /* 动画结束时停在的状态 backwards:第一帧 forwards:最后一帧 */ animation-fill-mode: forwards; /* 动画方向 alternate 反方向播放 */ animation-direction: alternate; /* 动画速度曲线 linear匀速; */ animation-timing-function: linear; /* 动画进行状态 running 进行 ,paused为暂停,通常配合:hover使用*/ animation-play-state: paused;
animation-name
-
描述
动画名称
-
取值
默认值:none
自定义动画名称
注意:
- 如果多个动画试图修改相同的属性,那么动画列表的后面覆盖前面
- 如果动画的其他7个子属性和动画名称的长度不同,动画名称列表的长度决定最终的长度,多余的值无余,缺少的值按照顺序进行重复
animation-duration
-
描述
完成一次动画的时长
-
取值
默认值:0s
0s意味着动画没有时间,持续时间不能为负值
animation-iteration-coun
-
描述
动画重复播放次数
-
取值
默认值:1
infinite:无限次动画
可以是整数也可以小数,但不能是0和负数。
animation-delay
-
描述
动画延迟多久才开始播放
-
取值
默认值:0s
只在动画开始时进行一次时间延迟
如果该值是负值,则表示动画的起始时间从0s变为延迟时间的绝对值
animation-fill-mode
-
描述
动画结束时停在的状态
-
取值
默认值:none
-
none: 动画结束后,元素移动到初始状态
注意:初始状态并不是指0%的元素状态,而是元素本身属性值
-
forwards: 元素停在动画结束时的位置
注意:动画结束时的位置并不一定是100%定义的位置,因为动画有可能反向运动,也有可能动画的次数是小数
-
backwards:在animation-delay的时间内,元素立刻移动到动画开始时的位置。若元素无animation-delay时,与none的效果相同
注意:动画开始时的位置也不一定是0%定义的位置,因为动画有可能反向运动。
-
both: 同时具有forwards和backwards的效果
-
animation-direction
-
描述
动画方向 ,用来定义动画是否反向播放
-
取值
默认值:normal
值 描述 normal 正向播放 reverse 反向播放 alternate 若动画只播放一次,则和正向播放一样。若播放两次以上,偶数次效果为反向播放 alternate-reverse 若动画只播放一次,则和反向播放一样。若播放两次以上,偶数次效果为正向播放
animation-timing-function
-
描述
动画速度曲线
-
取值
默认值:ease
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。即由慢到快。 |
ease-out | 动画以低速结束。即由快到慢。 |
ease-in-out | 动画以低速开始和结束。即由慢到快再到慢。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-play-state
-
描述
动画播放状态
-
取值
默认值:running
running表示播放中
paused表示动画暂停,通常配合:hover使用
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性