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

相关推荐
安冬的码畜日常8 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n036 分钟前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己2 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称3 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色3 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2343 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河3 小时前
CSS总结
前端·css
BigYe程普4 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发