css3动画往下滑动,CSS3 来回滑动的加载动画

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

background: #de3030;

color: #fff;

font: normal 1em sans-serif;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.centering {

width: 50%;

margin: auto;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

@-webkit-keyframes loader {

0% {

-webkit-transform: translateX(0px);

-moz-transform: translateX(0px);

-ms-transform: translateX(0px);

-o-transform: translateX(0px);

transform: translateX(0px);

}

50% {

-webkit-transform: translateX(120px);

-moz-transform: translateX(120px);

-ms-transform: translateX(120px);

-o-transform: translateX(120px);

transform: translateX(120px);

}

}

@keyframes loader {

0% {

-webkit-transform: translateX(0px);

-moz-transform: translateX(0px);

-ms-transform: translateX(0px);

-o-transform: translateX(0px);

transform: translateX(0px);

}

50% {

-webkit-transform: translateX(120px);

-moz-transform: translateX(120px);

-ms-transform: translateX(120px);

-o-transform: translateX(120px);

transform: translateX(120px);

}

}

.loaderContainer {

width: 160px;

margin: 0 auto;

position: relative;

}

.loaderContainer .loaderBG {

background: #be2727;

width: 160px;

height: 35px;

border-radius: 2px;

float: left;

}

.loaderContainer .loaderCircle {

background: #fff;

width: 40px;

height: 40px;

border-radius: 50%;

float: left;

position: absolute;

/* calling our animation keyframe */

top: -3px;

-webkit-animation: loader 2300ms infinite ease-in-out;

-moz-animation: loader 2300ms infinite ease-in-out;

-ms-animation: loader 2300ms infinite ease-in-out;

-o-animation: loader 2300ms infinite ease-in-out;

animation: loader 2300ms infinite ease-in-out;

}