CSS-Animation wird nicht auf div angewendet

Question

Blick auf Animista.net Ich möchte einige benutzerdefinierte CSS-Animationen schreiben. Also dachte ich, ich würde versuchen, eines ihrer Beispiele zu verwenden und es dann für meinen persönlichen Gebrauch zu optimieren.

.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>

Aber ich kann die Animationen nicht bekommen, überhaupt zu arbeiten.

Was mache ich falsch?

Answer 1

Hier sind Sie. Sie müssen eine Animation hinzufügen.

@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

Sie müssen auch die @keyframes zu definieren, um die Animation Arbeit zu machen. Siehe das angehängte Snippet.

.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>