cssを使ってクロス（右上）アニメーションを作成するには？

Question

私はCSS3を使ってクロスサイドアニメーションを作成しようとしています。私は専門家ではないので、なぜ私はそれをやることができないのか分かりません。私はそれについて検索し、キーフレームのチュートリアルを見つけました。下のコードを使用して、右上と下のアニメーションを左に行いました。

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;} 
} 

しかし、私はクロスアニメーションが必要です。実際には、CSS3を使ってブロードキャスト信号をアニメーション化したいと思います。私は、さらなる理解のために参照番号imageを追加しています。私はそれを感謝したいと思います。私はこれが愚かな質問であることを知っていますが、私は本当にあなたの指針が必要です。

Answer 1

あなたはこの

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>

のように行うことができます