CSS動畫不適用於div

Question

看着Animista.net我想寫一些自定義的CSS動畫。所以我想我會嘗試使用他們的一個例子，然後調整它以供我個人使用。

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
\t -webkit-animation: fade-in 1.2s steps(80, end) both; 
 
\t -moz-animation: fade-in 1.2s steps(80, end) both; 
 
\t animation: fade-in 1.2s steps(80, end) both; 
 
}

<div class="box"></div>

但我不能讓動畫在所有的工作。

我在做什麼錯？

Answer 1

給你。您必須添加動畫。

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

Codepen

Answer 2

您還需要定義@keyframes使動畫作品。請參閱附件中的片段。

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
\t -webkit-animation: fade-in 1.2s steps(80, end) both; 
 
\t -moz-animation: fade-in 1.2s steps(80, end) both; 
 
\t animation: fade-in 1.2s steps(80, end) both; 
 
} 
 
@-webkit-keyframes fade-in { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1.0; 
 
    } 
 
} 
 
@-moz-keyframes fade-in { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1.0; 
 
    } 
 
} 
 
@-o-keyframes fade-in { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1.0; 
 
    } 
 
} 
 
@keyframes fade-in { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1.0; 
 
    } 
 
}

<div class="box"></div>