Question

看Animista.net我想写一些自定义的CSS动画。所以我想我会尝试使用他们的一个例子，然后调整它供我个人使用。

＆＃13;

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

＆＃13;

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

＆＃13;

但我无法让动画完全奏效。

我做错了什么？

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;
	-webkit-animation: fade-in 1.2s steps(80, end) both;
	-moz-animation: fade-in 1.2s steps(80, end) both;
	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>

CSS动画未应用于div

2 个答案: