css3过渡效果

只需在要使用动效的元素加上class类即可生效（以下是局部class类）

/* 淡入 */
.a-fadein{
-webkit-animation-name:fadein;
-moz-animation-name:fadein;
-ms-animation-name:fadein;
animation-name:fadein;
-webkit-animation-duration: 1000ms;
-ms-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}

/* 淡出 */
.a-fadeout{
-webkit-animation-name:fadeout;
-moz-animation-name:fadeout;
-ms-animation-name:fadeout;
animation-name:fadeout;
-webkit-animation-duration: 1000ms;
-ms-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}

/* 弹跳 */
.a-bounce{
-webkit-animation-name:bounce;
-moz-animation-name:bounce;
-ms-animation-name:bounce;
animation-name:bounce;
-webkit-animation-duration: 1000ms;
-ms-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}

/* 弹入 */
.a-bouncein{
-webkit-animation-name:bouncein;
-moz-animation-name:bouncein;
-ms-animation-name:bouncein;
animation-name:bouncein;
-webkit-animation-duration: 1000ms;
-ms-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}

/* 弹出 */
.a-bounceout{
-webkit-animation-name:bounceout;
-moz-animation-name:bounceout;
-ms-animation-name:bounceout;
animation-name:bounceout;
-webkit-animation-duration: 1000ms;
-ms-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}