html中动画纵向循环播放,CSS3实现的循环动画

CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 100vw;

height: 100vh;

overflow: hidden;

background-color: #171723;

}

.canvas {

width: 500px;

height: 500px;

-webkit-perspective: 600px;

perspective: 600px;

}

@-webkit-keyframes hole-top {

0%, 15%, 100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@keyframes hole-top {

0%, 15%, 100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@-webkit-keyframes circle {

0%, 15%, 100% {

-webkit-transform: translate3d(-50%, -60%, 0);

transform: translate3d(-50%, -60%, 0);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: translate3d(-50%, 210%, 0) scale(0.75);

transform: translate3d(-50%, 210%, 0) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@keyframes circle {

0%, 15%, 100% {

-webkit-transform: translate3d(-50%, -60%, 0);

transform: translate3d(-50%, -60%, 0);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: translate3d(-50%, 210%, 0) scale(0.75);

transform: translate3d(-50%, 210%, 0) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@-webkit-keyframes hole-bottom {

0%, 30%, 85%, 100% {

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45%,

70% {

-webkit-transform: rotateX(-80deg);

transform: rotateX(-80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@keyframes hole-bottom {

0%, 30%, 85%, 100% {

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45%,

70% {

-webkit-transform: rotateX(-80deg);

transform: rotateX(-80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@-webkit-keyframes square {

0%, 30%, 85%, 100% {

border-radius: 50%;

-webkit-transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45% {

border-radius: 0px;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(360deg);

transform: translate3d(-50%, -40%, 0) rotate(360deg);

-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

}

70% {

border-radius: 35%;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(0deg);

transform: translate3d(-50%, -40%, 0) rotate(0deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@keyframes square {

0%, 30%, 85%, 100% {

border-radius: 50%;

-webkit-transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45% {

border-radius: 0px;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(360deg);

transform: translate3d(-50%, -40%, 0) rotate(360deg);

-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

}

70% {

border-radius: 35%;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(0deg);

transform: translate3d(-50%, -40%, 0) rotate(0deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

.half {

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 50%;

overflow: hidden;

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

transform-style: preserve-3d;

}

.half::before,

.half::after {

content: '';

display: block;

}

.half::before {

width: 250px;

height: 250px;

border-radius: 50%;

}

.half::after {

position: absolute;

top: 50%;

left: 50%;

width: 80px;

height: 80px;

}

.half:nth-child(1) {

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

}

.half:nth-child(1)::before {

background-color: aqua;

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: hole-top 3s infinite;

animation: hole-top 3s infinite;

}

.half:nth-child(1)::after {

border-radius: 50%;

background-color: gold;

-webkit-animation: circle 3s infinite;

animation: circle 3s infinite;

}

.half:nth-child(2)::before {

background-color: gold;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-animation: hole-bottom 3s infinite;

animation: hole-bottom 3s infinite;

}

.half:nth-child(2)::after {

background-color: tomato;

-webkit-animation: square 3s infinite;

animation: square 3s infinite;

}