CSS3动画效果

渐隐渐显

@-webkit-keyframes cf3FadeInOut {
0% { opacity:1; }
20% { opacity:.8; }
50% { opacity:0.5; }
70%{ opacity: .3;}
100% { opacity:0; }
}
div.bg { -webkit-animation-name: cf3FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 3s; }

晃动

.hand-animate { -webkit-animation: hand_move infinite 2s; }
@-webkit-keyframes hand_move {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg); }
100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0); }
}