css3常用动画

排版有点丑，效果就是点击的时候加上对应动画的class来出效果的。

html部分：

    <div class="content">
        <div id="box"></div>
        <div id="box1">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="btns">
            <button class="fade-left">左飞进</button>
            <button class="fade-right">右飞进</button>
            <button class="fade-top">上飞进</button>
            <button class="fade-btm">下飞进</button>
            <button class="fade-opc">渐现</button>
            <button class="fade-roate">翻转</button>
            <button class="flop">翻牌</button>
            <button class="bounce-up">上下抖动</button>
        </div> 
     </div>           

css部分：

.content{width:1000px;margin:0 auto;overflow: hidden;}
#box{height: 200px;width:200px;background: #fea332;position:absolute;transition:transform .4s; }
.btns{position:absolute; top:300px;left:400px;}
.fade-left{animation:fadeLeft 1s forwards;}
.fade-right{animation:fadeRight 1s forwards;}
.fade-top{animation:fadeTop 1s forwards;}
.fade-btm{animation:fadeBottom 1s forwards;}
.fade-opc{animation:changeOpacity 1s forwards;}
.fade-roate{transform: rotate(45deg);}
.bounce-up{-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}
#box1 .front,#box1 .back{width:200px;height:300px;position:absolute;top:400px;left:0;transition:transform .4s;transform-style:preserve-3d;-webkit-backface-visibility: hidden;-o-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}
#box1 .front{background:#fea223;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
#box1 .back{background:#fee888;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);}
#box1 .front.active{background:#fea223;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);}
#box1 .back.active{background:#fee888;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
@keyframes fadeLeft{
    0%{left:-999px;}
    100%{left:500px;}
}
@keyframes fadeRight{
    0%{right:-999px;}
    100%{right:500px;}
}
@keyframes fadeTop{
    0%{top:-999px;}
    100%{top:400px;}
}
@keyframes fadeBottom{
    0%{bottom:-999px;}
    100%{bottom:200px;}
}
@keyframes changeOpacity{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes bounce-up {
    0%{
      opacity: 1;
    }
    25% {
        -webkit-transform: translateY(10px);
        opacity: .7;
    }
    50%{
        -webkit-transform: translateY(0);
        opacity: .5;
    } 
    
    75% {
        -webkit-transform: translateY(-10px);
        opacity: .3;
    }
    100%{
      opacity: 0;
    }
}
 
@keyframes bounce-up {
    0%{
      opacity: 1;
    }
    25% {
        transform: translateY(10px);
        opacity: .7;
    }
    50%{
        transform: translateY(0);
        opacity: .5;
    } 
    
    75% {
        transform: translateY(-10px);
        opacity: .3;
    }
    100%{
      opacity: 0;
    }
}

js部分：

需要自行引入jq文件

　　　　$(function(){
            $("button").click(function(){
                var ItemClass = $(this).attr("class");
                $("#box").removeClass();
                $("#box").addClass(ItemClass);
            });

            $(".flop").click(function(){
                $("#box1 div").toggleClass("active");
            })

        })