1.transition 属性
简介
transition(过渡)) 是指从一个状态到另一个状态的变化。比如当鼠标在某个元素上悬停时,我们会修改它的样式,采用 transition 可以创建一个平滑的动画效果。
简单用法
代码
意义
在 0.5 秒的时间里,按照 linear 的时间函数(timing-function)来改变某个元素的 background 属性。
示例
当鼠标在按钮上悬停时(hover)改变按钮的 background。
html
css
效果
如果我们把 transition: background 1s linear
放到hover中则只有鼠标离开时才有动画效果;
简写transition全部参数
transition:[property] [duration] [delay] [timeing-function]
transition全写
transition-property:all;
/ 规定过渡css属性名称 /transition-duration: 1s;
/ 过渡持续时间 3s===31000ms */transition-delay: 0.1s;
/ 过渡效果延迟开始时间 /transition-timing-function: ease-in;
/ 时间函数 /
时间函数Steps()
参数
动画完成步数
参数类型:Number
第一个步进点
参数:start/end
默认:end
示例
html
css
效果
添加多个过渡
html
css
效果
添加移除类触发过渡
简单示例
效果
html
css
js
Last updated