css方块跳动且颜色变化,CSS3 方块变换动画

CSS

语言：

CSSSCSS

确定

body {

background: #1a4366; }

.square {

width: 15px;

height: 10px;

position: absolute;

top: 50%;

left: 50%;

background: #73b3ff;

-webkit-animation: grow 3s infinite cubic-bezier(0.53, 0.68, 0.53, 0.41); }

.square:nth-of-type(2) {

margin-top: 12px;

-webkit-animation-delay: 0.1s; }

.square:nth-of-type(3) {

margin-top: 24px;

-webkit-animation-delay: 0.2s; }

.square:nth-of-type(4) {

margin-top: 36px;

-webkit-animation-delay: 0.3s; }

.square:nth-of-type(5) {

margin-top: 48px;

-webkit-animation-delay: 0.4s; }

@-webkit-keyframes grow {

0%, 100% {

-webkit-transform: translateX(-25px) scaleX(0.5);

background: #73b3ff; }

25% {

-webkit-transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);

background: #f0c078; }

50% {

-webkit-transform: translateX(25px) scaleX(0.5);

background: #73b3ff; }

75% {

-webkit-transform: translateX(0px) scaleY(1) scaleX(5) rotateY(180deg);

background: #f0c078; } }

.wrapper {

width: 50px;

height: 98px;

position: absolute;

left: 50%;

top: 50%;

margin-top: -100px;

margin-left: -25px;

-webkit-transform-style: preserve-3d;

-webkit-animation: 2s global infinite; }

@-webkit-keyframes global {

0%, 100% {

-webkit-transform: rotateY(0deg); }

50% {

-webkit-transform: rotateY(360deg); } }