CSS3 animation (动画) 属性

@keyframes规定动画

animation 所有动画属性的简写属性,除了animation-play-state属性。

animation-name 动画的名称 (必须的)

animation-duration 完成一共用的时间,默认是0s (必须的)

animation-timing-function 速度曲线,默认 ease 步长 steps()

linear 匀速

ease 默认, 以低速开始,然后加快,在结束前变慢

ease-in 动画以低速开始 , 加速

ease-out 动画以低速结束,减速

ease-in-out 动画以低速开始和结束 ,先加速后减速

steps() 指定了时间函数中的间隔数量(步长)

animation-delay 何时开始,默认 0s

animation-iteration-count 重复次数,默认 1次, infinite 无限循环

animation-direction 来回播放,默认 normal 不倒回 alternate 逆播放

animation-fill-mode 动画结束状态, 默认 backwards 回到起始 forwards 保持

连写

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: name duration timing-funcion delay iteration-count direction fill-mode ;

animation: name 1s ease 0s infinite alternate forwards;

animation-play-state 鼠标放上运行或暂停,默认 running不暂停 pause 鼠标放上暂停

暂停动画:animation-play-state:puased;经常和 :hover 经过等其他配合使用

相关推荐
静默回滚14 分钟前
图片能显示,画进canvas却空白:像素面积上限
前端
补码缩写14 分钟前
canvas大图内存怎么算:宽×高×4只是第一份
前端
coding漫漫长路19 分钟前
img.decode()报错的图能画,load成功的却是空的
前端
不可能片场21 分钟前
AI视频首尾帧控制 用参考图定住镜头
前端·electron
修炼的dance26 分钟前
canvas最大能开多大:先看面积,再看导出格式
前端
薛一半38 分钟前
React-Redux核心原理与容器组件实战
前端·javascript·react.js
做运维的阿瑞38 分钟前
自连接、交叉连接与复杂 JOIN:一条问题链讲透
前端·数据库·mysql
言乐61 小时前
JavaScript概括前端原理
开发语言·前端·javascript·python·ecmascript
回眸&啤酒鸭1 小时前
DeepSeek V4.1 Flash 批量处理实战指南
服务器·前端·javascript
用户3374096924261 小时前
2026-09-27-Qwen-Image-2.1-1660Ti本地部署实战
前端