css3循环播放一组动画,CSS3 无穷循环的动画演示

CSS

语言：

CSSSCSS

确定

.wrapper {

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background: -webkit-linear-gradient(315deg, #f7cac9 0%, #2a8be4 100%);

background: linear-gradient(135deg, #f7cac9 0%, #2a8be4 100%);

}

.ball {

width: 30px;

height: 30px;

position: absolute;

top: calc(50% - 15px);

left: calc(50% - 15px);

-webkit-animation: x-axis 1s ease-in-out alternate infinite;

animation: x-axis 1s ease-in-out alternate infinite;

}

.ball:before {

content: '';

width: 100%;

height: 100%;

position: absolute;

background: #fff;

border-radius: 50%;

-webkit-animation: y-axis .5s ease-in-out .25s alternate infinite;

animation: y-axis .5s ease-in-out .25s alternate infinite;

}

.ball:after {

content: '';

width: 30px;

height: 7.5px;

background: #000;

top: 90px;

left: 0;

position: absolute;

border-radius: 100%;

-webkit-animation: shadow .5s ease-in .15s alternate infinite;

animation: shadow .5s ease-in .15s alternate infinite;

}

@-webkit-keyframes x-axis {

0% {

-webkit-transform: translate(-60px);

transform: translate(-60px);

}

100% {

-webkit-transform: translate(60px);

transform: translate(60px);

}

}

@keyframes x-axis {

0% {

-webkit-transform: translate(-60px);

transform: translate(-60px);

}

100% {

-webkit-transform: translate(60px);

transform: translate(60px);

}

}

@-webkit-keyframes y-axis {

0% {

-webkit-transform: translateY(-60px);

transform: translateY(-60px);

}

100% {

-webkit-transform: translateY(60px);

transform: translateY(60px);

}

}

@keyframes y-axis {

0% {

-webkit-transform: translateY(-60px);

transform: translateY(-60px);

}

100% {

-webkit-transform: translateY(60px);

transform: translateY(60px);

}

}

@-webkit-keyframes shadow {

0% {

opacity: .2;

-webkit-transform: scale(0.7);

transform: scale(0.7);

}

100% {

opacity: .7;

-webkit-transform: scale(0.9);

transform: scale(0.9);

}

}

@keyframes shadow {

0% {

opacity: .2;

-webkit-transform: scale(0.7);

transform: scale(0.7);

}

100% {

opacity: .7;

-webkit-transform: scale(0.9);

transform: scale(0.9);

}

}