CSS动画:animation、transition、transform、translate的区别

前言

在日常前端开发中,很少有用到需要做动画效果的页面,大部分都是靠UI切图,所以一直对css的动画一头雾水。最近接到一个Tab组件的开发需求,领导希望实现类似某网站上的特定动画效果。

我对着需求研究了半天,最后发现只需添加一行CSS代码就能达成目标------原来困扰我许久的动画实现竟如此简单。

这次经历让我意识到,正是因为对CSS动画知识储备不足,才白白浪费了半天的时间。趁着当下有空,我决定系统梳理一下CSS动画相关内容,重点搞懂animation、transition、transform、translate这四个常被混淆的英文单词及其具体用途。

看看代码的效果,便知道这四个属性的区别了。

本文参考了这篇文章:juejin.cn/post/684490...

属性 含义
transition(过渡) 用于设置元素的样式过渡
animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性
transform(变形) transform 属性允许你旋转、缩放、倾斜或平移给定元素。
translate(移动) translate 允许你单独声明平移变换,并独立于 transform 属性

transition(过渡)

用于设置元素的样式过渡。

代码:codepen.io/paofuniuniu...

这段代码表示,对.box设置一个transition过渡属性,在hover变形旋转缩放时,慢慢过渡这个变形旋转缩放的效果。

transition属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

描述 使用方式 默认值
transition-property 设置过渡效果的 CSS 属性的名称 例如margin-right、color等,比如设置了hover时margn-right有变化:transition-property:margin-right; all
transition-duration 完成过渡效果需要多少秒或毫秒 transition-property: 0.5s; 0s
transition-timing-function 速度效果的速度曲线 有好多种,看mdn,比如ease等线性变化,还有step等。transition-timing-function:ease ease
transition-delay 定义过渡效果何时开始 transition-delay: 1s; 0s

animation(动画)

用于设置动画属性,他是一个简写的属性,包含6个属性------ 是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

代码:codepen.io/paofuniuniu...

模仿值 描述 使用方式示例 默认值
animation-name 用来调用 @keyframes定义好的动画,与 @keyframes 定义的动画名称一致 animation-name: name1; none
animation-duration 动画所持续的时间 animation-duration: 2s; 0s
animation-timing-function 速度效果的速度曲线,如 ease, linear, ease-in 等 animation-timing-function: ease-in-out; ease
animation-delay 执行动画之前等待的时间 animation-delay: 1s; 0s
animation-iteration-count 定义动画的播放次数,可选具体次数或者无限(infinite) animation-iteration-count: 3; 或 infinite; 1
animation-direction 设置动画播放方向:normal(按时间轴顺序), reverse(反方向), alternate(来回往复), alternate-reverse(反向再正向交替) animation-direction: alternate; normal
animation-play-state 控制元素动画的播放状态,通过此来控制动画的暂停和继续,值:running(继续),paused(暂停) animation-play-state: paused; running
animation-fill-mode 控制动画结束后,元素的样式。有四个值:none(回到初始状态)、forwards(停留在结束帧)、backwards(回到第一帧)、both(结合 direction 应用 forwards/backwards)注意与 iteration-count 不要冲突(如无限循环时) animation-fill-mode: forwards; none

transform(变形)

transform 属性允许你旋转、缩放、倾斜或平移给定元素。

代码:codepen.io/paofuniuniu...

translate(移动)

translate 允许你单独声明平移变换,并独立于 transform 属性。 直接 translate: 50% -40%; 就可以。

总结

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip7 小时前
JavaScript事件流
前端·javascript
赵得C7 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG7 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904277 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js