html制作循环动画语句,纯css制作块动画SASS循环

*{

box-sizing: border-box;

}

html{

height: 100%;

}

body{

width: 100%;

height: 100%;

background-color: #a584f4;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

overflow: hidden;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.circle-container{

position: relative;

margin-left: auto;

margin-right: auto;

-webkit-transform: translatex(-53.5%);

transform: translatex(-53.5%);

width: 50%;

height: 25%;

}

@-webkit-keyframes rotateSquares1{

0% {

-webkit-transform: translatex(6.66667%) rotate(0deg);

transform: translatex(6.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #ee1a1a;

}

75% {

background: #ee111a;

}

100% {

-webkit-transform: translatex(6.66667%) rotate(360deg);

transform: translatex(6.66667%) rotate(360deg);

background: #1aee1a;

}

}

@keyframesrotateSquares1{

0% {

-webkit-transform: translatex(6.66667%) rotate(0deg);

transform: translatex(6.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #ee1a1a;

}

75% {

background: #ee111a;

}

100% {

-webkit-transform: translatex(6.66667%) rotate(360deg);

transform: translatex(6.66667%) rotate(360deg);

background: #1aee1a;

}

}

.circle:nth-child(1){

position: absolute;

-webkit-transform: translatex(6.66667%);

transform: translatex(6.66667%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares1;

animation: rotateSquares1;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares2{

0% {

-webkit-transform: translatex(13.33333%) rotate(0deg);

transform: translatex(13.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #dd1a1a;

}

75% {

background: #dd221a;

}

100% {

-webkit-transform: translatex(13.33333%) rotate(360deg);

transform: translatex(13.33333%) rotate(360deg);

background: #1add1a;

}

}

@keyframesrotateSquares2{

0% {

-webkit-transform: translatex(13.33333%) rotate(0deg);

transform: translatex(13.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #dd1a1a;

}

75% {

background: #dd221a;

}

100% {

-webkit-transform: translatex(13.33333%) rotate(360deg);

transform: translatex(13.33333%) rotate(360deg);

background: #1add1a;

}

}

.circle:nth-child(2){

position: absolute;

-webkit-transform: translatex(13.33333%);

transform: translatex(13.33333%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares2;

animation: rotateSquares2;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares3{

0% {

-webkit-transform: translatex(20%) rotate(0deg);

transform: translatex(20%) rotate(0deg);

background: #33001a;

}

25% {

background: #cc1a1a;

}

75% {

background: #cc331a;

}

100% {

-webkit-transform: translatex(20%) rotate(360deg);

transform: translatex(20%) rotate(360deg);

background: #1acc1a;

}

}

@keyframesrotateSquares3{

0% {

-webkit-transform: translatex(20%) rotate(0deg);

transform: translatex(20%) rotate(0deg);

background: #33001a;

}

25% {

background: #cc1a1a;

}

75% {

background: #cc331a;

}

100% {

-webkit-transform: translatex(20%) rotate(360deg);

transform: translatex(20%) rotate(360deg);

background: #1acc1a;

}

}

.circle:nth-child(3){

position: absolute;

-webkit-transform: translatex(20%);

transform: translatex(20%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares3;

animation: rotateSquares3;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares4{

0% {

-webkit-transform: translatex(26.66667%) rotate(0deg);

transform: translatex(26.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #bb1a1a;

}

75% {

background: #bb441a;

}

100% {

-webkit-transform: translatex(26.66667%) rotate(360deg);

transform: translatex(26.66667%) rotate(360deg);

background: #1abb1a;

}

}

@keyframesrotateSquares4{

0% {

-webkit-transform: translatex(26.66667%) rotate(0deg);

transform: translatex(26.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #bb1a1a;

}

75% {

background: #bb441a;

}

100% {

-webkit-transform: translatex(26.66667%) rotate(360deg);

transform: translatex(26.66667%) rotate(360deg);

background: #1abb1a;

}

}

.circle:nth-child(4){

position: absolute;

-webkit-transform: translatex(26.66667%);

transform: translatex(26.66667%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares4;

animation: rotateSquares4;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares5{

0% {

-webkit-transform: translatex(33.33333%) rotate(0deg);

transform: translatex(33.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #aa1a1a;

}

75% {

background: #aa551a;

}

100% {

-webkit-transform: translatex(33.33333%) rotate(360deg);

transform: translatex(33.33333%) rotate(360deg);

background: #1aaa1a;

}

}

@keyframesrotateSquares5{

0% {

-webkit-transform: translatex(33.33333%) rotate(0deg);

transform: translatex(33.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #aa1a1a;

}

75% {

background: #aa551a;

}

100% {

-webkit-transform: translatex(33.33333%) rotate(360deg);

transform: translatex(33.33333%) rotate(360deg);

background: #1aaa1a;

}

}

.circle:nth-child(5){

position: absolute;

-webkit-transform: translatex(33.33333%);

transform: translatex(33.33333%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares5;

animation: rotateSquares5;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares6{

0% {

-webkit-transform: translatex(40%) rotate(0deg);

transform: translatex(40%) rotate(0deg);

background: #33001a;

}

25% {

background: #991a1a;

}

75% {

background: #99661a;

}

100% {

-webkit-transform: translatex(40%) rotate(360deg);

transform: translatex(40%) rotate(360deg);

background: #1a991a;

}

}

@keyframesrotateSquares6{

0% {

-webkit-transform: translatex(40%) rotate(0deg);

transform: translatex(40%) rotate(0deg);

background: #33001a;

}

25% {

background: #991a1a;

}

75% {

background: #99661a;

}

100% {

-webkit-transform: translatex(40%) rotate(360deg);

transform: translatex(40%) rotate(360deg);

background: #1a991a;

}

}

.circle:nth-child(6){

position: absolute;

-webkit-transform: translatex(40%);

transform: translatex(40%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares6;

animation: rotateSquares6;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares7{

0% {

-webkit-transform: translatex(46.66667%) rotate(0deg);

transform: translatex(46.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #881a1a;

}

75% {

background: #88771a;

}

100% {

-webkit-transform: translatex(46.66667%) rotate(360deg);

transform: translatex(46.66667%) rotate(360deg);

background: #1a881a;

}

}

@keyframesrotateSquares7{

0% {

-webkit-transform: translatex(46.66667%) rotate(0deg);

transform: translatex(46.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #881a1a;

}

75% {

background: #88771a;

}

100% {

-webkit-transform: translatex(46.66667%) rotate(360deg);

transform: translatex(46.66667%) rotate(360deg);

background: #1a881a;

}

}

.circle:nth-child(7){

position: absolute;

-webkit-transform: translatex(46.66667%);

transform: translatex(46.66667%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares7;

animation: rotateSquares7;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.7s;

animation-delay: 0.7s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares8{

0% {

-webkit-transform: translatex(53.33333%) rotate(0deg);

transform: translatex(53.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #771a1a;

}

75% {

background: #77881a;

}

100% {

-webkit-transform: translatex(53.33333%) rotate(360deg);

transform: translatex(53.33333%) rotate(360deg);

background: #1a771a;

}

}

@keyframesrotateSquares8{

0% {

-webkit-transform: translatex(53.33333%) rotate(0deg);

transform: translatex(53.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #771a1a;

}

75% {

background: #77881a;

}

100% {

-webkit-transform: translatex(53.33333%) rotate(360deg);

transform: translatex(53.33333%) rotate(360deg);

background: #1a771a;

}

}

.circle:nth-child(8){

position: absolute;

-webkit-transform: translatex(53.33333%);

transform: translatex(53.33333%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares8;

animation: rotateSquares8;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares9{

0% {

-webkit-transform: translatex(60%) rotate(0deg);

transform: translatex(60%) rotate(0deg);

background: #33001a;

}

25% {

background: #661a1a;

}

75% {

background: #66991a;

}

100% {

-webkit-transform: translatex(60%) rotate(360deg);

transform: translatex(60%) rotate(360deg);

background: #1a661a;

}

}

@keyframesrotateSquares9{

0% {

-webkit-transform: translatex(60%) rotate(0deg);

transform: translatex(60%) rotate(0deg);

background: #33001a;

}

25% {

background: #661a1a;

}

75% {

background: #66991a;

}

100% {

-webkit-transform: translatex(60%) rotate(360deg);

transform: translatex(60%) rotate(360deg);

background: #1a661a;

}

}

.circle:nth-child(9){

position: absolute;

-webkit-transform: translatex(60%);

transform: translatex(60%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares9;

animation: rotateSquares9;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 0.9s;

animation-delay: 0.9s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares10{

0% {

-webkit-transform: translatex(66.66667%) rotate(0deg);

transform: translatex(66.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #551a1a;

}

75% {

background: #55aa1a;

}

100% {

-webkit-transform: translatex(66.66667%) rotate(360deg);

transform: translatex(66.66667%) rotate(360deg);

background: #1a551a;

}

}

@keyframesrotateSquares10{

0% {

-webkit-transform: translatex(66.66667%) rotate(0deg);

transform: translatex(66.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #551a1a;

}

75% {

background: #55aa1a;

}

100% {

-webkit-transform: translatex(66.66667%) rotate(360deg);

transform: translatex(66.66667%) rotate(360deg);

background: #1a551a;

}

}

.circle:nth-child(10){

position: absolute;

-webkit-transform: translatex(66.66667%);

transform: translatex(66.66667%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares10;

animation: rotateSquares10;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1s;

animation-delay: 1s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares11{

0% {

-webkit-transform: translatex(73.33333%) rotate(0deg);

transform: translatex(73.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #441a1a;

}

75% {

background: #44bb1a;

}

100% {

-webkit-transform: translatex(73.33333%) rotate(360deg);

transform: translatex(73.33333%) rotate(360deg);

background: #1a441a;

}

}

@keyframesrotateSquares11{

0% {

-webkit-transform: translatex(73.33333%) rotate(0deg);

transform: translatex(73.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #441a1a;

}

75% {

background: #44bb1a;

}

100% {

-webkit-transform: translatex(73.33333%) rotate(360deg);

transform: translatex(73.33333%) rotate(360deg);

background: #1a441a;

}

}

.circle:nth-child(11){

position: absolute;

-webkit-transform: translatex(73.33333%);

transform: translatex(73.33333%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares11;

animation: rotateSquares11;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1.1s;

animation-delay: 1.1s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares12{

0% {

-webkit-transform: translatex(80%) rotate(0deg);

transform: translatex(80%) rotate(0deg);

background: #33001a;

}

25% {

background: #331a1a;

}

75% {

background: #33cc1a;

}

100% {

-webkit-transform: translatex(80%) rotate(360deg);

transform: translatex(80%) rotate(360deg);

background: #1a331a;

}

}

@keyframesrotateSquares12{

0% {

-webkit-transform: translatex(80%) rotate(0deg);

transform: translatex(80%) rotate(0deg);

background: #33001a;

}

25% {

background: #331a1a;

}

75% {

background: #33cc1a;

}

100% {

-webkit-transform: translatex(80%) rotate(360deg);

transform: translatex(80%) rotate(360deg);

background: #1a331a;

}

}

.circle:nth-child(12){

position: absolute;

-webkit-transform: translatex(80%);

transform: translatex(80%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares12;

animation: rotateSquares12;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares13{

0% {

-webkit-transform: translatex(86.66667%) rotate(0deg);

transform: translatex(86.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #221a1a;

}

75% {

background: #22dd1a;

}

100% {

-webkit-transform: translatex(86.66667%) rotate(360deg);

transform: translatex(86.66667%) rotate(360deg);

background: #1a221a;

}

}

@keyframesrotateSquares13{

0% {

-webkit-transform: translatex(86.66667%) rotate(0deg);

transform: translatex(86.66667%) rotate(0deg);

background: #33001a;

}

25% {

background: #221a1a;

}

75% {

background: #22dd1a;

}

100% {

-webkit-transform: translatex(86.66667%) rotate(360deg);

transform: translatex(86.66667%) rotate(360deg);

background: #1a221a;

}

}

.circle:nth-child(13){

position: absolute;

-webkit-transform: translatex(86.66667%);

transform: translatex(86.66667%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares13;

animation: rotateSquares13;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1.3s;

animation-delay: 1.3s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares14{

0% {

-webkit-transform: translatex(93.33333%) rotate(0deg);

transform: translatex(93.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #111a1a;

}

75% {

background: #11ee1a;

}

100% {

-webkit-transform: translatex(93.33333%) rotate(360deg);

transform: translatex(93.33333%) rotate(360deg);

background: #1a111a;

}

}

@keyframesrotateSquares14{

0% {

-webkit-transform: translatex(93.33333%) rotate(0deg);

transform: translatex(93.33333%) rotate(0deg);

background: #33001a;

}

25% {

background: #111a1a;

}

75% {

background: #11ee1a;

}

100% {

-webkit-transform: translatex(93.33333%) rotate(360deg);

transform: translatex(93.33333%) rotate(360deg);

background: #1a111a;

}

}

.circle:nth-child(14){

position: absolute;

-webkit-transform: translatex(93.33333%);

transform: translatex(93.33333%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares14;

animation: rotateSquares14;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1.4s;

animation-delay: 1.4s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}

@-webkit-keyframes rotateSquares15{

0% {

-webkit-transform: translatex(100%) rotate(0deg);

transform: translatex(100%) rotate(0deg);

background: #33001a;

}

25% {

background: #001a1a;

}

75% {

background: #00ff1a;

}

100% {

-webkit-transform: translatex(100%) rotate(360deg);

transform: translatex(100%) rotate(360deg);

background: #1a001a;

}

}

@keyframesrotateSquares15{

0% {

-webkit-transform: translatex(100%) rotate(0deg);

transform: translatex(100%) rotate(0deg);

background: #33001a;

}

25% {

background: #001a1a;

}

75% {

background: #00ff1a;

}

100% {

-webkit-transform: translatex(100%) rotate(360deg);

transform: translatex(100%) rotate(360deg);

background: #1a001a;

}

}

.circle:nth-child(15){

position: absolute;

-webkit-transform: translatex(100%);

transform: translatex(100%);

background: #33001a;

display: block;

width: 100%;

height: 80px;

border: solid1pxblack;

box-shadow: 0px0px5px3pxrgba(0, 0, 0, 0.2);

-webkit-animation: rotateSquares15;

animation: rotateSquares15;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

border: 1pxsolidwhite;

opacity: 0.7;

}