排版有点丑，效果就是点击的时候加上对应动画的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"); ???????????}) ???????})css3常用动画
原文地址：https://www.cnblogs.com/hongyafang/p/8310299.html