梦想之家

CSS3中的动画--过渡属性 transition-property

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

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

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

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

先来看transition-property属性

transition-property用来指定过渡动画的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;}

演示结果:

鼠标移入

鼠标移出

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

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

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

详细介绍来自慕课网;


例如:让容器在hover状态下宽度和高度从100px慢慢过渡到150px,背景颜色过渡到红色。温馨提醒:务必考虑到浏览器的兼容性喔!

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>

<style>
    div{
        width:100px;
        height:100px;
        background:orange;
        /*过渡的属性*/
        -webkit-transition-property:all;
        -moz-transition-property:all;
        -ms-transition-property:all;
        -o-transition-property:all;
        transition-property:all;
        /*过渡所需时间*/
        -webkit-transition-duration:.8s;
        -moz-transition-duration:.8s;
        -ms-transition-duration:.8s;
        -o-transition-duration:.8s;
        transition-duration:.8s;
        /*过渡的函数*/
        -webkit-transition-timing-function:ease;
        -moz-transition-timing-function:ease;
        -ms-transition-timing-function:ease;
        -o-transition-timing-function:ease;
        transition-timing-function:ease;
        /*开始出现延迟的时间*/
        -webkit-transition-delay:.15s;
        -moz-transition-delay:.15s;
        -ms-transition-delay:.15s;
        -o-transition-delay:.15s;
        transition-delay:.15s;
        /*以上可以简写为以下模式顺序不能错*/
        -webkit-transition:all .8s ease .1s;
        transition:all .8s ease .05s;
    }
    div:hover{
        width:150px;
        height:150px;
        background:red;
    }
</style>
</head> 
<body>
<div></div>

</body>
</html>

效果可以自己复制代查看效果,因为是动态的这里就不截图了;


您此刻的心情: