css3过度动画网页加载中,css

css

body {

margin: 0;

padding: 0;

background: #2196f3;

}

.transition-loader {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

}

.transition-loader-inner {

transform: translateY(-50%);

top: 50%;

position: absolute;

width: calc(100% - 200px);

color: #FFF;

padding: 0 100px;

text-align: center;

}

.transition-loader-inner label {

font-size: 1em;

padding: 1%;

opacity: 0;

display: inline-block;

}

.transition-loader-inner label:after {

font-family: FontAwesome;

content: '\f111';

}

.transition-loader-inner label:nth-child(1) {

-webkit-animation: loader 3s 600ms infinite ease-in-out;

animation: loader 3s 600ms infinite ease-in-out;

}

.transition-loader-inner label:nth-child(2) {

-webkit-animation: loader 3s 500ms infinite ease-in-out;

animation: loader 3s 500ms infinite ease-in-out;

}

.transition-loader-inner label:nth-child(3) {

-webkit-animation: loader 3s 400ms infinite ease-in-out;

animation: loader 3s 400ms infinite ease-in-out;

}

.transition-loader-inner label:nth-child(4) {

-webkit-animation: loader 3s 300ms infinite ease-in-out;

animation: loader 3s 300ms infinite ease-in-out;

}

.transition-loader-inner label:nth-child(5) {

-webkit-animation: loader 3s 200ms infinite ease-in-out;

animation: loader 3s 200ms infinite ease-in-out;

}

.transition-loader-inner label:nth-child(6) {

-webkit-animation: loader 3s 100ms infinite ease-in-out;

animation: loader 3s 100ms infinite ease-in-out;

}

@keyframes loader {

0% {

opacity: 0;

transform: translateX(-300px) scale(1);

}

33% {

opacity: 1;

transform: translateX(0px) scale(2);

}

66% {

opacity: 1;

transform: translateX(0px) scale(1);

}

100% {

opacity: 0;

transform: translateX(300px) scale(2);

}

}

@-webkit-keyframes loader {

0% {

opacity: 0;

-webkit-transform: translateX(-300px);

}

33% {

opacity: 1;

-webkit-transform: translateX(0px);

}

66% {

opacity: 1;

-webkit-transform: translateX(0px);

}

100% {

opacity: 0;

-webkit-transform: translateX(300px);

}

}