css3永久放大动画,CSS3 简单的方形放大动画

CSS

语言：

CSSSCSS

确定

.loading {

position: absolute;

top: 50%;

left: 50%;

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

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

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

width: 40px;

height: 40px;

}

.loading > div {

position: relative;

float: left;

width: 20px;

height: 20px;

-webkit-animation-duration: 2.5s;

animation-duration: 2.5s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: cubic-bezier(0.69, 0.245, 0.185, 1.51);

animation-timing-function: cubic-bezier(0.69, 0.245, 0.185, 1.51);

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

}

.loading > div:nth-child(1) {

background-color: #fa8072;

-webkit-transform-origin: top left;

-ms-transform-origin: top left;

transform-origin: top left;

-webkit-animation-name: frame1;

animation-name: frame1;

}

.loading > div:nth-child(2) {

background-color: #fba440;

-webkit-transform-origin: top right;

-ms-transform-origin: top right;

transform-origin: top right;

-webkit-animation-name: frame2;

animation-name: frame2;

}

.loading > div:nth-child(3) {

background-color: #579fbb;

-webkit-transform-origin: bottom left;

-ms-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-animation-name: frame4;

animation-name: frame4;

}

.loading > div:nth-child(4) {

background-color: #906b92;

-webkit-transform-origin: bottom right;

-ms-transform-origin: bottom right;

transform-origin: bottom right;

-webkit-animation-name: frame3;

animation-name: frame3;

}

@-webkit-keyframes frame1 {

0% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

12.5% {

-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

25%,

100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

}

@keyframes frame1 {

0% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

12.5% {

-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

25%,

100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

}

@-webkit-keyframes frame2 {

0%, 24.9%, 50%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

25% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

37.5% {

-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

@keyframes frame2 {

0%, 24.9%, 50%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

25% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

37.5% {

-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

@-webkit-keyframes frame3 {

0%, 49.9%, 75%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

50% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

62.5% {

-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

@keyframes frame3 {

0%, 49.9%, 75%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

50% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

62.5% {

-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

@-webkit-keyframes frame4 {

0%, 74.9%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

75% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

87.5% {

-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

@keyframes frame4 {

0%, 74.9%, 100% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 0;

}

75% {

-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);

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

opacity: 0.8;

z-index: 10;

}

87.5% {

-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);

opacity: 1;

z-index: 10;

}

}

html,

body {

height: 100%;

overflow: hidden;

}

body {

background-color: #1d2a38;

}