CSS3 transition介绍 | 如何设计炫酷的动画效果？

最新推荐文章于 2024-09-20 17:23:14 发布

yeana1

最新推荐文章于 2024-09-20 17:23:14 发布

阅读量3.1k

点赞数 4

分类专栏： web前端文章标签：动画设计 css3 CSS3 transition 职场

本文链接：https://blog.csdn.net/yeana1/article/details/52024303

版权

本文详细介绍了CSS3 transition的4个子属性：transition-property、transition-duration、transition-timing-function和transition-delay，以及如何通过它们创建平滑动画。内容涵盖了过渡触发方式、transitionend事件、隐式过渡、开关过渡和永久过渡，还有如何处理auto过渡的挑战。通过实例解析，帮助读者掌握CSS3 transition的使用技巧。

摘要由CSDN通过智能技术生成

本篇介绍CSS3里另一个人气动画属性transition。transition从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。例如获得焦点，点击鼠标等动作导致CSS属性值的变化是瞬间完成的，感觉有点生硬。用transition可以指定在某时间段内将属性值平滑过渡，增强用户体验。

4个子属性

transition-property
transition-duration
transition-timing-function
transition-delay

触发过渡的方式

transitionend事件

隐式过渡

开关过渡和永久过渡

auto过渡

4个子属性

------------------------------

transition有4个子属性：transition-property，transition-duration，transition-timing-function，transition-delay

transition-property指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡。哪些属于能数字量化的CSS属性呢？例如：

颜色系，如color，background-color，border-color，outline-color等

数字系，实在太多了，如width，height，top，right，bottom，left，zoom，opacity，line-height，background-position，word-spacing，font-weight，vertical-align，outline-outset，z-index等。

01系，如visibility（0表示隐藏，1表示显示）

还有更多如渐变，阴影等分类请参照W3C的Animation of property types，不一一列举了。W3C上还有可过渡属性一览表Properties from CSS。通常只要能设数字（包括%百分比）的属性都能过渡。

除了单个指定属性外，transition-property还能设为all，表示所有属性都将获得过渡效果。

transition-duration过渡需要的时间，单位可指定s秒，也可指定ms毫秒。默认值是0，表示立刻变化。如果设置了多个过渡属性，但每个属性的过渡时间都一样，你没必要为transition-duration设多个值，只有设一个即可，该值会应用到所有过渡属性上。

transition-timing-function过渡函数，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其实它们都是贝赛尔曲线。如下