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

相关推荐
_龙衣1 小时前
将 swagger 接口导入 apifox 查看及调试
前端·javascript·css·vue.js·css3
进取星辰2 小时前
25、Tailwind:魔法速记术——React 19 样式新思路
前端·react.js·前端框架
x-cmd2 小时前
[250512] Node.js 24 发布:ClangCL 构建,升级 V8 引擎、集成 npm 11
前端·javascript·windows·npm·node.js
夏之小星星3 小时前
el-tree结合checkbox实现数据回显
前端·javascript·vue.js
crazyme_63 小时前
前端自学入门:HTML 基础详解与学习路线指引
前端·学习·html
撸猫7913 小时前
HttpSession 的运行原理
前端·后端·cookie·httpsession
亦世凡华、3 小时前
Rollup入门与进阶:为现代Web应用构建超小的打包文件
前端·经验分享·rollup·配置项目·前端分享
Bl_a_ck4 小时前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
为美好的生活献上中指4 小时前
java每日精进 5.11【WebSocket】
java·javascript·css·网络·sql·websocket·网络协议
augenstern4165 小时前
webpack重构优化
前端·webpack·重构