微信扫码显示特效：
下面是实际效果：(可以自己移动鼠标，尝试效果)
(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)
现在就一个一个效果单独演示： 演示demo的html内容为：
魔芋
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); } }
**