只需在要使用动效的元素加上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;

}