阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

CSS3 transition 属性过渡效果简介及多属性写法

本篇文章用来介绍CSS3动画属性中的transition:用于 CSS 元素的属性值在一定的时间区间内平滑地过渡,通常用于制作一些触发式的动画效果,这种效果可以再鼠标单击、获得焦点、被点击或对元素任何改变中等情况触发使用。

下面我们来简单的线从最基础的语法和属性值来一步一步学习:

基础语法是:transition: property duration timing-function delay;

transition 属性其实是一个简写属性,用于设置四个过渡属性:
transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。

例如:我们需要制作一个DIV,移动到元素上,背景色做渐变:


<!DOCTYPE html>
<html>
    <head>
        <style> 
            div{
                width: 100px; height: 100px;
                background: blue;
                transition: background 2s;
                -moz-transition: background 2s; /* Firefox 4 */
                -webkit-transition: background 2s; /* Safari and Chrome */
                -o-transition: background 2s; /* Opera */
            }

            div:hover{
                background: red;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

效果图

 

同理,我们如果想制作宽度的渐变,也就是调整一下属性罢了:


<!DOCTYPE html>
<html>
    <head>
        <style> 
            div{
                width: 100px; height: 100px;
                background: blue;
                transition: width 2s;
                -moz-transition: width 2s; /* Firefox 4 */
                -webkit-transition: width 2s; /* Safari and Chrome */
                -o-transition: width 2s; /* Opera */
            }
            div:hover{
                width: 200px;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

效果图

 

下面看看多属性写法,如果我们同时改变宽度和高度,写法如下:


<!DOCTYPE html>
<html>
    <head>
        <style> 
            div{
                width: 100px; height: 100px;
                background: blue;
                transition: width 2s,height 2s;
                -moz-transition: width 2s,height 2s; /* Firefox 4 */
                -webkit-transition: width 2s,height 2s; /* Safari and Chrome */
                -o-transition: width 2s,height 2s; /* Opera */
            }
            div:hover{
                width: 200px; height: 200px;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

效果图

 

注:想必大家看到刚刚的写法应该都有一个疑问,那就是-moz-transition等属性又是什么。

其实transition的浏览器兼容性只支持: Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

而Firefox 4、Safari and Chrome、Opera等属性就要额外利用这些属性去兼容。

Internet Explorer 9及更古老的版本,还是老老实实用javascript吧。

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=814

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切