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 经过等其他配合使用

相关推荐
saber_andlibert1 小时前
TCMalloc底层实现
java·前端·网络
逍遥德1 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~1 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions1 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子2 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘2 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录2 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
梦帮科技3 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头3 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多3 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js