transition相关

计时函数linear

表示动画的开始和结束之间会有均匀的间距,动画的每一帧都需要相同的时间,对象从一侧线性移动到另一侧

计时函数ease-in-out

表示动画的开始很慢,结束时也很慢,中间会稍微快一点

自定义速度

这里的曲线显化了各个阶段动画的速度

调整曲线的曲折,它会生成相对应的贝塞尔曲线,把曲线复制到代码里去

它就会根据你要的速度运行

延迟

这样的话动画会在鼠标悬浮在父元素上3s后才开启动画

编写动画

给动画起个名字 -> left-to-right
然后去定义left-to-right动画的关键帧(关键帧基本上决定了我们的动画在0%-100%完成度之间的所有值是什么样子)

如果不定义100%完成度会直接应用变化里的样式,而不定义0%完成度的时候会直接应用元素本身的样式

设置动画填充模式animation-fill-mode

如果是backwards,表示在动画开始之前将所有的属性应用到0关键帧(0%)

如果是forwards,表示在动画完成后,将所有的属性保留在100关键帧(100%)

做出在父级里环游一周的效果
设置动画迭代计数,次数或者重复时长

这里设置的是重复3次,也可以设置无限次infinite

设置交替方向,本质上来说,表示当动画到达末尾时,下一次迭代会向相反方向移动
设置动画的状态

这里表示如果鼠标悬停在父元素上,动画将会停止

相关推荐
朱昆鹏1 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek1 小时前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
永远是我的最爱1 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安1 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode1 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd1 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup
天下代码客2 小时前
使用electronc框架调用dll动态链接库流程和避坑
前端·javascript·vue.js·electron·node.js
weixin199701080162 小时前
【性能提升300%】仿1688首页的Webpack优化全记录
前端·webpack·node.js
冰暮流星2 小时前
javascript之数组
java·前端·javascript
晚霞的不甘3 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架