CSS 3 transition属性

　　最近在了解移动框架的相关知识，在此之中发现了一部分动画需要使用css 3种的动画属性，于是在闲暇时间了解了css3的动画知识。于是写本博客总结。

　　首先了解一下CSS 3中transition过渡属性：

　　　　简： transition:<transition-property>   <ransition-duration>  <transition-timing-function>  <transition-delay>;如下图：

 

通过给相关元素添加transition样式属性就可以为此添加过渡的效果，如下图中的logo图像的:hover状态下logo图片会由透明度为1到0过渡，具体代码如下：

css 样式代码

/************** 圆角边框样式 ******************/
        .radius-box {
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -o-border-radius: 100px;
        }

        /************** 容器样式 ******************/
        .container-box {
            width: 100px;
            height: 100px;
            border: solid 5px #ccc;

        }

        /************** logo样式 ******************/

        .logo {
            width: 100px;
            height: 100px;
            border: solid 5px #ffffff;
            box-sizing: border-box;
            opacity: 1;
            transition: opacity 1s ease .1s;
            -webkit-transition: opacity 1s ease .1s; /* Safari 和 Chrome */
            -moz-transition: opacity 1s ease .1s; /* Firefox 4 */
            -o-transition: opacity 1s ease .1s;/* Opera */
        }

        /************** logo:hover状态下将opacity改为0 ******************/
        .logo:hover {
            opacity: 0;
        }

HTML代码

<!-- 容器 -->
<div class="container-box radius-box">
    <!-- logo -->
    <img class="logo radius-box" src="images/logo.jpeg" alt="logo图片"/>
    <!-- logo end -->
</div>
<!-- 容器 end -->

 效果

 

这个样子还是有点单调，所以现在在进行一下修饰，为logo添加上第二个css属性即 transform ；

transform：转换属性，本属性主要的作用是对元素进行旋转、缩放、移动或倾斜；

　　translate(x,y)：2D 转换   点击查看效果

　　scale(x,y)： 2D 缩放转换   点击查看效果

　　rotate(angle)：2D 旋转，在参数中规定角度   点击查看效果

　　skew(x-angle,y-angle): 沿着 X 和 Y 轴的 2D 倾斜转换  点击查看效果

以上是简单的属性介绍，接下来我们来修改一下我们的代码：

新css 样式代码 

/************** 圆角边框样式 ******************/
        .radius-box {
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -o-border-radius: 100px;
        }

        /************** 容器样式 ******************/
        .container-box {
            width: 100px;
            height: 100px;
            border: solid 5px #ccc;

        }

        /************** logo样式 ******************/

        .logo {
            width: 100px;
            height: 100px;
            border: solid 5px #ffffff;
            box-sizing: border-box;
            opacity: 1;
            transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s;
            -webkit-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Safari 和 Chrome */
            -moz-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Firefox 4 */
            -o-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Opera */
        }

        /************** logo:hover状态下将opacity改为0 ******************/
        .logo:hover {
            opacity: 0;
            width: 0;
            height: 0;
            transform: translate(50px,50px);
            -moz-transform: translate(50px,50px);
            -webkit-transform: translate(50px,50px);
            -o-transform: translate(50px,50px);
        }

HTML结构不变。这样修改后的效果为： 

这样修改以后效果会之前的更有感觉。