42. CSS3 transition-property设置动画过渡属性

早期在 Web 中要实现动画效果,都是依赖于 JavaScript 或 Flash 来完成。但在 CSS3 中新增加了一个新的模块transition,它可以通过一些简单的 CSS 事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变 CSS 的属性值

在 CSS 中创建简单的过渡效果可以从以下几个步骤来实现:

  1. 在默认样式中声明元素的初始状态样式;
  2. 声明过渡元素最终状态样式,比如悬浮状态;
  3. 在默认样式中通过添加过渡函数,添加一些不同的样式。

CSS3 的过度 transition 属性是一个复合属性,主要包括以下几个子属性:

  • transition-property:指定过渡或动态模拟的 CSS 属性;
  • transition-duration:指定完成过渡所需的时间;
  • transition-timing-function:指定过渡函数;
  • transition-delay:指定开始出现的延迟时间;

先来看 transition-property 属性

transition-property用来指定过渡动画的 CSS 属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的 CSS 属性主要有:

过渡的 CSS 属性

实例演示

HTML 代码:

<div></div>

CSS 代码:

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

效果如下:

CSS3 动画之过渡属性 transition-property

特别注意:当transition-property属性设置为all时,表示的是所有中点值的属性。

用一个简单的例子来说明这个问题:

假设你的初始状态设置了样式 width、height、background,当你在终始状态都改变了这三个属性,那么all代表的就是 width、height 和 background。如果你的终始状态只改变了 width 和 height 时,那么all代表的就是 width 和 height。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 42. CSS3 transition-property设置动画过渡属性

发表回复