【发布时间】：2021-06-28 10:57:05
【问题描述】：
我查看了 w3schools 并发现了这个用于在 2 种颜色之间进行动画转换的 sn-p 代码：
@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;}
}
和
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
为了使 4 张图像之间的过渡动画化，我对此进行了调整：
@keyframes graphic {
from {img src="Scene1.jpg" alt="Scene1";}
to {img src="Scene2.jpg" alt="Scene2";}
to {img src="Scene3.jpg" alt="Scene3";}
to {img src="Scene4.jpg" alt="Scene4";}
}
.animation {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: graphic;
animation-duration: 20s;
animation-iteration-count: infinite;
}
并将其用作 div：
<div class="animation">
animation
</div>
然而，这一切只是将文本“动画”放到网页上。我是否正确地调整了这一点，或者是否有其他方法可以在图像之间设置动画过渡？
【问题讨论】：
-
是的，你的方法根本不正确。关键帧设置 CSS 属性，但
img src="Scene1.jpg" alt="Scene1";不是 CSS，甚至不是远程的。 -
你的方法不对，查看这个链接css3.bradshawenterprises.com/cfimg