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>