如何使用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>