记录一下css3的transition

表示持续时间
transition:1s
第一个表示动画持续时间,第二个表示延迟多少秒才执行这个动画
transition:1s 2s

transition:all 1s 表示所有动画都是1s,平时经常用transition:all 0.5s搭配transform:scale(1.05)来做图片的hover放大l离开还原。

****下面是一些我不经常用到的
持续时间变成3节动画 第一个是立马开始第一节动画 第二个是等待2秒后开始第一节动画
transition:all 6s steps(3, start) 0s
transition:all 6s steps(3) 0s
【这里插一个额外知识点 这个持续时间变化cubic-bezier(x1,y1,x2,y2);和贝塞尔曲线有关


里面有个gif图易懂】

ease: 开始和结束慢,中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似,但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

1赞

学习了!

PS: 我做贝塞尔曲线那道题的时候,感觉这个知识点不太好记,就想着以后用的时候再查资料,多用几次应该自然就记住了。。后来做项目的时候发现挺少用到这个的。