css3边框交替动画_css3 背景色 实现边框渐变运动动画

#body_id{animation:myfirst 10s ease-in-out -2s infinite alternate;

/*Firefox:*/-moz-animation:myfirst 10s ease-in-out -2s infinite alternate;

/*Safari 和 Chrome:*/-webkit-animation:myfirst 10s ease-in-out -2s infinite alternate;

/*Opera:*/-o-animation:myfirst 10s ease-in-out -2s infinite alternate;height:51px;

}.mui-bar{-webkit-box-shadow:none;box-shadow:none;background:#FFFFFF;height:50px;

}@keyframes myfirst{0% {

background:-moz-linear-gradient(left, red, #f96, yellow, green, #ace);background:-webkit-linear-gradient(left, red, #f96, yellow, green, #ace);background:-o-linear-gradient(left, red, #f96, yellow, green, #ace);background:linear-gradient(left, red, #f96, yellow, green, #ace);

}25%{background:-moz-linear-gradient(left, #ace, red, #f96, yellow, green);background:-webkit-linear-gradient(left, #ace, red, #f96, yellow, green);background:-o-linear-gradient(left, #ace, red, #f96, yellow, green);background:linear-gradient(left, #ace, red, #f96, yellow, green);

}50%{background:-moz-linear-gradient(left, green, #ace, red, #f96, yellow);background:-webkit-linear-gradient(left, green, #ace, red, #f96, yellow);background:-o-linear-gradient(left, green, #ace, red, #f96, yellow);background:linear-gradient(left, green, #ace, red, #f96, yellow);

}75%{background:-moz-linear-gradient(left, yellow, green, #ace, red, #f96);background:-webkit-linear-gradient(left, yellow, green, #ace, red, #f96);background:-o-linear-gradient(left, yellow, green, #ace, red, #f96);background:linear-gradient(left, yellow, green, #ace, red, #f96);

}100%{background:-moz-linear-gradient(left, #f96, yellow, green, #ace, red);background:-webkit-linear-gradient(left, #f96, yellow, green, #ace, red);background:-o-linear-gradient(left, #f96, yellow, green, #ace, red);background:linear-gradient(left, #f96, yellow, green, #ace, red);

}}

@-moz-keyframes myfirst/*Firefox*/

{0% {

background:-moz-linear-gradient(left, red, #f96, yellow, green, #ace);

}25%{background:-moz-linear-gradient(left, #ace, red, #f96, yellow, green);

}50%{background:-moz-linear-gradient(left, green, #ace, red, #f96, yellow);

}75%{background:-moz-linear-gradient(left, yellow, green, #ace, red, #f96);

}100%{background:-moz-linear-gradient(left, #f96, yellow, green, #ace, red);

}}

@-webkit-keyframes myfirst/*Safari 和 Chrome*/

{0% {

background:-webkit-linear-gradient(left, red, #f96, yellow, green, #ace);

}25%{background:-webkit-linear-gradient(left, #ace, red, #f96, yellow, green);

}50%{background:-webkit-linear-gradient(left, green, #ace, red, #f96, yellow);

}75%{background:-webkit-linear-gradient(left, yellow, green, #ace, red, #f96);

}100%{background:-webkit-linear-gradient(left, #f96, yellow, green, #ace, red);

}}

@-o-keyframes myfirst/*Opera*/

{0% {

background:-o-linear-gradient(left, red, #f96, yellow, green, #ace);

}25%{background:-o-linear-gradient(left, #ace, red, #f96, yellow, green);

}50%{background:-o-linear-gradient(left, green, #ace, red, #f96, yellow);

}75%{background:-o-linear-gradient(left, yellow, green, #ace, red, #f96);

}100%{background:-o-linear-gradient(left, #f96, yellow, green, #ace, red);

}}