CSS3 Transitions, Transforms和Animation的使用

一、首先说说transition这个属性:

它有下面几个参数：

transition-property：* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡

transition-duration：*//指定这个过渡的持续时间

transition-delay：*//延迟过渡时间

先演示一下这个属性的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div{
         background-color: red;
    }
    .trans{
        -webkit-transition-property: background-color;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease;
    }  
    .trans:hover{
        background-color: #486AAA;
        color:#fff;
    }
    
</style>
<body>
    <div class="trans" style="width:100px;height:100px">
        看看我是怎么变化的
    </div>
</body>
</html>

左边是原状态，右边是鼠标在div上面时的状态

大多数情况下，我们都是把这几个参数写在一起的

.trans {
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

我们从字面上来看看这些属性的意义：

linear：中文翻译成线性，也不用多说，大家都知道这个匀速的变化

ease-in：直接中文翻译出来缓慢-进，就是先慢后快

ease-out：与上面的ease-in想法，缓慢出，就是先慢后快

ease-in-out ：就是缓慢进，缓慢出，就是慢进中快慢出

cubic-bezier：贝塞尔曲线问题，多数情况不会遇到，暂不研究

下面有参考图片解析：

这里有一个具体的参考例子，您可以狠狠地点击这里：不同缓动类效果demo(Opera/Chrome/Safari)

二、transform

transform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。见下面示例代码：

.trans_skew { transform: skew(35deg); }//倾斜
.trans_scale { transform:scale(1, 0.5); }//缩放
.trans_rotate { transform:rotate(45deg); }//旋转
.trans_translate { transform:translate(10px, 20px); }偏移

属性使用点击这里：transform些属性效果demo

transform属性要是加上transition的过渡特性，那可就是如虎添翼，樱木花道配上流川枫啊，可以产生不少美妙的火花，例如下面这个例子，关键代码如下：

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

webkit核心的浏览器，效果显示地点击这里：酷酷的缩放旋转动画demo

三、animations

使用:

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

　效果显示地点击这里：animations水平弹性缩放变色动画

转自(更详细请参考)：http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms和animation使用简介与应用展示/

posted @ 2015-12-11 16:14 waisonlong 阅读(570) 评论(0) 收藏举报

刷新页面返回顶部

waisonlong

CSS3 Transitions, Transforms和Animation的使用

公告