这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
Title/ CSS 动画完全指南 #flight.Archives008
序: 持续日更第8天! 加油吧,学习前端的xdm. 我是
忘我思考, 共同进步!简介: 一篇最简洁高效的CSS 动画教程, 包括Transition和Animation属性的完整使用方法.
Tag/ Transition介绍
CSS有个属性叫 transition, 中文翻译过来就是 "过渡".
transition 可以让元素指定的某些属性变化的时候以柔和的方式过渡.
element {
transition: background-color 1s, font-size 2s ease-in, margin-left 1s 2s;
}
这段代码中 element 的背景颜色,字体大小和左边距属性变化的时候, 都会有柔和的过渡.
其中 background-color 的过渡动画时长一秒,
font-size 的过渡动画时长两秒, 并且有"缓入"的效果,
margin-left 的时长一秒, 并且会有两秒的延时.
Tag/ Transition相关属性
-
transition指定元素的过渡方式.
可取值:
transition: background-color 2s; /* 元素名 时长 */ transition: margin-left 2s 1s; /* 元素名 时长 延时 */ transition: margin-left 2s ease-in-out; /* 元素名 时长 过渡函数 */ transition: margin-left 2s ease-in-out 1s; /* 元素名 时长 过渡函数 延时 */ transition: margin-left 2s, color 1s; /* transition 支持同时定义多个属性 */ transition: all 1s ease-out; /* 元素名中 all 关键字可以代表所有属性, none 关键字可以代表无属性 */ transition: all 1s ease-out; /* 过渡函数中 all 关键字可以代表所有属性, none 关键字可以代表无属性 */ transition: margin-left 2s cubic-bezier(0.4, 0, 1, 1); /* 过渡函数可以是关键字, 也可以使用cubic-bezier()函数 */ transition: margin-left 2s steps(4, end); /* 过渡函数也可以使用steps()函数 */关于
<timing-function>(过渡函数) 的具体介绍, 参见 developer.mozilla.org/en-US/docs/… 和 css-tricks.com/almanac/pro…关于
cubic-bezier()函数的具体介绍, 参见 www.w3schools.com/cssref/func…交互式体验
cubic-bezier函数, 前往 cubic-bezier.com/ -
transition-duration指定过渡时长, 和在
transition中用法相同. -
transition-timing-function指定过渡函数, 和在
transition中用法相同. -
transition-delay指定过渡延时, 和在
transition中用法相同. -
transition-property指定元素名, 和在
transition中用法相同.
Tag/ Animation介绍
下一版更新!
Tag/ Animation相关属性
->> See also
MDN -
<easing-function>developer.mozilla.org/en-US/docs/…MDN - Using CSS Transitions developer.mozilla.org/zh-CN/docs/…
->> Reference link
Transition:
MDN中文文档 developer.mozilla.org/zh-CN/docs/…
MDN英文文档 developer.mozilla.org/en-US/docs/…
W3Schools www.w3schools.com/css/css3_tr…
Josh Comeau www.joshwcomeau.com/animation/c…
Sara Cope css-tricks.com/almanac/pro…
张鑫旭 www.zhangxinxu.com/wordpress/t…
Animation:
MDN中文文档 developer.mozilla.org/zh-CN/docs/…
MDN英文文档 developer.mozilla.org/en-US/docs/…
W3Schools www.w3schools.com/css/css3_an…
Chris Coyier css-tricks.com/almanac/pro…
->> Version History
现在版本为V1.0 详见 Github(@flightmakers)
2021.8.18 在掘金发布V0.1