css3动画之常用按钮、卡片动画特效

前言：

不得不说引入CSS3的 transition 属性之后，让部分动画变得无比简单与高效，之前很多要用监听事件才能完成的动画效果，现在“一个” transition 就可以解决，而且高效多了。

这里我先列出六种动画来浅谈下CSS3的 transition 属性来实现动画（你会发现实现其实大同小异的）

 

效果图：

 

了解transition：

在讲解实现之前，我们要先来了解一下这个 transition 属性。

Q：什么是 transition属性呢？
A：w3.org 给出的官方解释是“CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration” 翻译一下就是 “它允许CSS部分属性的值在变化时，在指定的时间内平滑过渡” 当然，也只是部分属性而已，但是这部分属性已经足够让我们做出非常强悍的动画效果了。

 

Q：我们要怎么使用 transition 呢？
A：transition: transition-property transition-duration transition-timing-function transition-delay
      默认值：transition: all 0 ease 0;

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-property支持的属性值：http://www.css88.com/book/css/properties/transition/transition-property.htm
transition-timing-function支持的属性值：http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp
那两个参数应该就不用解释了吧...

 

实现：

侧边导航栏

    侧边导航栏的实现就是通过控制导航栏外层盒子的 left 属性值从而实现侧拉的效果，上代码。

var btn = document.getElementById('btn');
var nav = document.getElementsByClassName('nav')[0];
var toggle = false;
btn.onclick = function(e){
    if(toggle){
        nav.style.left = '-250px';
        btn.innerHTML = '显示导航栏';
        toggle = !toggle;
    }else{
        nav.style.left = '0px';
        btn.innerHTML = '隐藏导航栏';
        toggle = !toggle;
    }
}

    而关键代码还是在css里

.nav{
	position: absolute;
	width: 250px;
	left: -250px;
	transition: all .5s;
}

动态蒙层

动态蒙层实现的原理和侧边导航栏一致，只不过把事件触发改成了hover(侧边导航栏也可以用hover实现，具体自己可以去试试，不过其有些局限性)  还是直接上代码吧。

.wrapper:hover .mask{
    bottom: 0px;
    background-color: rgba(0,0,0,.2);
    opacity: 1;
}
.mask{
    position: absolute;
    bottom: -50px;
    opacity: 0;
    transition: all .5s;
}

卡片翻转

卡片翻转的实现是应用了 transform (注意与transition进行区分，transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。)

.flipper, .front, .back {
    width: 320px;
    height: 480px;
}
/*鼠标滑过容器盒子时其翻转180度*/
.flipper:hover{
    transform: rotateY(180deg);
}
/*设置盒子翻转的时间*/
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;/*使被转换的子元素保留其3D转换*/
    position: relative;
}
.front, .back {
    backface-visibility: hidden;/*设置自身3D属性的背面不可见*/
    position: absolute;
    top: 0;
    left: 0;
}
/*设置正面初始翻转角度为0即没有翻转，背面初始翻转角度为180*/
.front {
    z-index: 2;
    transform: rotateY(0deg);    
    background-color: #ffc89c;
}
.back {
    transform: rotateY(180deg);    
    background-color: #67bfd2;
}

<div class="flipper">
    <div class="front">
        this is front
    </div>
    <div class="back">
        this is back
    </div>
</div>