微信扫码显示特效：
下面是实际效果：(可以自己移动鼠标，尝试效果)
(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)
现在就一个一个效果单独演示：
演示demo的HTML内容为：
<div class="moyu">魔芋</div>
CSS：
div {width:200px;height:200px;background: red;margin:50px;color:#fff;line-height:200px;font-size:30px;text-align:center;}
淡入：（改变透明度）
.moyu {-webkit-animation: change 2s ease;animation: change 2s ease;}@-webkit-keyframes change {0%{opacity:0;}100%{opacity:1;}}@keyframes change {0%{opacity:0;}100%{opacity:1;}}
效果：
淡出就是调整opacity从1到0.
淡入-从下
说明：就是加是transform 的translate
.moyu {-webkit-animation: change 2s ease infinite;animation: change 2s ease infinite;}@-webkit-keyframes change {0%{opacity:0;-webkit-transform:translateY(-100px);transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px);}}@keyframes change {0%{opacity:0;-webkit-transform:translateY(-100px);transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px);}}
（魔芋解释：由于录制gif图片效果不是很好，请见谅。）
弹跳
改变transform:translateY的值
@-webkit-keyframes change {0%,20%,50%,80%,100%{-webkit-transform: translateY(0);}40%{-webkit-transform: translateY(-30px);}60%{-webkit-transform: translateY(-15px);}}
弹入
透明度结合transform:scale
@-webkit-keyframes change {0%{opacity:0;-webkit-transform: scale(0.3);}50%{opacity:1;-webkit-transform: scale(1.05);}70%{-webkit-transform: scale(0.9);}100%{-webkit-transform: scale(1);}}
转入
@-webkit-keyframes change {0%{opacity:0;-webkit-transform: rotate(-200deg);}100%{opacity:1;-webkit-transform: rotate(0);}}
翻转
@keyframes change {0%{transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}40%{transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}80%{transform: perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function: ease-in;}100%{transform: perspective(400px) scale(1);animation-timing-function: ease-in;}}
闪烁
@keyframes change {0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
震颤
@keyframes change{0%,100%{transform: translateX(0);}10%,30%,50%,70%,90%{transform: translateX(-10px);}20%,40%,60%,80%{transform: translateX(10px);}}
摇摆：
@keyframes change{20%{transform: rotate(15deg);}40%{transform: rotate(-10deg);}60%{transform: rotate(5deg);}80%{transform: rotate(-5deg);}100%{transform: rotate(0);}}
摇晃：
@keyframes change{0%{transform: translateX(0);}15%{transform: translateX(-100px) rotate(-5deg);}30%{transform: translateX(80px) rotate(3deg);}45%{transform: translateX(-65px) rotate(-3deg);}60%{transform: translateX(40px) rotate(2deg);}75%{transform: translateX(-20px) rotate(-1deg);}100%{transform: translateX(0);}}
响铃：
@keyframes change {0%{transform: scale(1);}10%,20%{transform: scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform: scale(1.1) rotate(3deg);}40%,60%,80%{transform: scale(1.1) rotate(-3deg);}100%{transform: scale(1) rotate(0);}}
**