* {
margin: 0;
padding: 0;
}
/**BOX WORKING FINE**/
#box {
width: 20%;
height: 130px;
padding: 20px;
box-sizing: border-box;
position: relative;
top: 20px;
left: 30%;
background-color: blue;
color: white;
border-radius: 40px;
}
@keyframes nehal {
from {
background-color: blue;
}
to {
background-color: black;
padding: 10px;
top: 50px;
left: 10px;
background-image: linear-gradient(blue, black);
}
}
#box {
animation-name: nehal;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate-reverse;
animation-timing-function: steps(100);
}
/***ISN'T WORKING FINE****/
#zip {
background-color: red;
width: 15%;
height: 130px;
text-indent: 0px;
position: relative;
top: 200px;
left: 100px;
}
@keyframes flowz {
from {
background-color: red;
}
to {
text-align: center;
background-color: green;
left: 200px;
}
}
#zip {
animation-name: flows;
animation-delay: 4s;
animation-iteration-count: 3;
}
<h1>CSS3 Animations & Transitions</h1>
<div id="box">
<h3>Box!</h3>
</div>
<div id="zip">
<h4>Flowers</h4>
</div>
问题是第二个动画不起作用,但是第一个动画效果很好,但是我尝试了第二个动画的所有功能,但仍然无法正常工作。
需要帮忙!!谢谢
最佳答案
如果动画名称为flowz
,则不能使用flows
另外,您还缺少动画时间:
* {
margin: 0;
padding: 0;
}
/**BOX WORKING FINE**/
#box {
width: 20%;
height: 130px;
padding: 20px;
box-sizing: border-box;
position: relative;
top: 20px;
left: 30%;
background-color: blue;
color: white;
border-radius: 40px;
}
@keyframes nehal {
from {
background-color: blue;
}
to {
background-color: black;
padding: 10px;
top: 50px;
left: 10px;
background-image: linear-gradient(blue, black);
}
}
#box {
animation-name: nehal;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate-reverse;
animation-timing-function: steps(100);
}
/***WORKING FINE****/
#zip {
background-color: red;
width: 15%;
height: 130px;
text-indent: 0px;
position: relative;
top: 200px;
left: 100px;
}
@keyframes flowz {
from {
background-color: red;
}
to {
text-align: center;
background-color: green;
left: 200px;
}
}
#zip {
animation-name: flowz; /* FIX THIS */
animation-duration: 4s; /* ADD THIS */
animation-delay: 4s;
animation-iteration-count: 3;
}
<h1>CSS3 Animations & Transitions</h1>
<div id="box">
<h3>Box!</h3>
</div>
<div id="zip">
<h4>Flowers</h4>
</div>
想要更流畅的动画?
不要使用
top
和left
,而是transform
* {margin:0; padding:0; box-sizing: border-box;}
#box {
position: relative;
width: 80px;
height: 80px;
transform: translate(0px, 20px);
animation: anim1 4s 0s alternate infinite;
background:#444;
}
@keyframes anim1 {
to {
transform: translate(50px, 10px);
background: chocolate;
}
}
#zip {
background-color: #0bf;
width: 80px;
height: 80px;
position: relative;
top:30px;
animation: anim2 2s 1s alternate infinite;
}
@keyframes anim2 {
to {
background-color: #f0b;
transform: translateX(200px);
}
}
<div id="box"></div>
<div id="zip"></div>
关于css3 - CSS3动画(关键帧动画问题),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42039924/