css transition

css transition

ease与ease-in-out的区别

两者的整体效果都是缓入缓出,只是细节上存在差异

贝塞尔曲线
ease cubic-bezier(0.25, 0.1, 0.25,1)
ease-in-out cubic-bezier(0.42, 0, 0.58, 1)

比较两者的贝塞尔曲线,ease缓入效果较其缓出效果不明显;ease-in-out缓入缓出效果都比价明显

step-start 和step-end

step-start 等同于 steps(1, start), 过渡效果分一步完成,在步的起始开始,即直接过渡到效果

step-end 等同于 steps(1, end), 过渡效果分一步完成,在步的结束开始,即transition-duration之后完成过渡效果

steps()

语法:steps(< integer >[, [ start | end ] ]?)

过渡步数为整数,第二个参数默认值为 end

start:表示过渡从第一步时间的开始开始(会直接看到过渡效果)

end:表示过渡从第一步时间的结束开始(不会直接看到过渡效果)

注意: transition-delay 将包含于步进函数的第一步,即第一步的持续时间为均分时间加上延迟时间

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容