Wie erstellt man Cross (rechts oben) Animation mit CSS?

Question

Ich versuche Cross Side Animation mit CSS3 zu erstellen. Da ich kein Experte bin, habe ich keine Ahnung, wie ich das machen kann. Ich habe darüber gesucht und finde Tutorial des Schlüsselrahmens. Ich habe links oben und unten Animation mit dem unteren Code gemacht.

div { 
     width: 100px; 
     height: 100px; 
     background-color: red; 
     position: relative; 
     -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
     animation-name: example; 
     animation-duration: 4s; 
    } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes example { 
    0% {background-color:red; left:0px; top:0px;} 
    25% {background-color:yellow; left:200px; top:0px;} 
    50% {background-color:blue; left:200px; top:200px;} 
    75% {background-color:green; left:0px; top:200px;} 
    100% {background-color:red; left:0px; top:0px;} 
} 

/* Standard syntax */ 
@keyframes example { 
    0% {background-color:red; left:0px; top:0px;} 
    25% {background-color:yellow; left:200px; top:0px;} 
    50% {background-color:blue; left:200px; top:200px;} 
    75% {background-color:green; left:0px; top:200px;} 
    100% {background-color:red; left:0px; top:0px;} 
} 

Aber ich brauche Kreuzanimation. Eigentlich möchte ich die Broadcast-Signale mit CSS3 animieren. Ich füge die Referenz image für das weitere Verständnis hinzu. Ich würde es gerne würdigen. Ich weiß, das ist eine blöde Frage, aber ich brauche wirklich deine Richtlinie.

Answer 1

Sie können wie diese tun

div { 
 
    top: 200px 
 
    left: 0px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {background-color:red; left:0px; top:200px;} 
 
    25% {background-color:yellow; left:50px; top:150px;} 
 
    50% {background-color:blue; left:100px; top:100px;} 
 
    75% {background-color:green; left:150px; top:50px;} 
 
    100% {background-color:red; left:200px; top:0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {background-color:red; left:0px; top:200px;} 
 
    25% {background-color:yellow; left:50px; top:150px;} 
 
    50% {background-color:blue; left:100px; top:100px;} 
 
    75% {background-color:green; left:150px; top:50px;} 
 
    100% {background-color:red; left:200px; top:0px;} 
 
}

<div></div>