我正在尝试让关键帧适用于每张图片。所以我实际上想要一张图片向左，另一张向右。但是当我运行这段代码时，它只对两张图片使用完全相同的关键帧。我似乎无法为两个不同的图像创建两条不同的路径。
我该如何继续解决这个问题？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="funnel.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.Gurl1 {
position: relative;
padding-left: 500px;
}
.Gurl2 {
position: relative;
padding-left: 300px;
}
#girl2 {
position: relative;
margin-left: 10cm;
}
.center {
margin: auto;
width: 20%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation-timing-function property is not supported in Internet Explorer 9 and earlier versions.</p>
<div class="container">
</div>
<div class="funnel leads estimated">
<h2 class="center-text">Actual 100 Day Lead Conversion</h2>
<ul class="two">
<li>
<div class="funnel-top"></div>
1574<span>Contacts</span>
</li>
<li>203<span>MQL2</span></li>
<li>112<span>MQL2</span></li>
<li>57<span>SAL</span></li>
<li>11<span>SQL</span></li>
<li>
<div class="funnel-bottom"></div>
4<span>Wins</span>
</li>
</ul>
</div>
<div class="col-sm-3 col-md-6 Gurl1"><h1>Girl1</h1></div>
<div class="col-sm-9 col-md-6 Gurl2"><h1>Girl2</h1></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function {
$('').each(function(i) {
$(this).delay(i*600).fadeIn('slow')
});
</script>
<script>
$( document ).ready(function() {
$('head').append("<style> #girl2 {background-color: none;font-weight: bold;position: relative;-webkit-animation: mymove 5s infinite; animation: mymove 5s 1;animation-fill-mode: forwards;</style> <style> #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;}</style><style>@keyframes mymove {0% {top:0px; left:0px;} 25% {top:0px; left: 900px;} 50% {top: 700px; left: 900px;} 100% {top: 700px; left: 0px;} }</style>")
$('.container').append("<img class='div2' id='girl1' src='http://www.returnofkings.com/wp-content/uploads/2013/04/prettygirl.jpg' height=auto width=80px/> <img id='girl2' class='div2' src='https://i.pinimg.com/736x/62/b8/6a/62b86a59e23510f5f6e48c5d899782c3--beautiful-people-beautiful-women.jpg' height=auto width=80px/>");
});
</script>
</body>
</html>
如果有人感兴趣的话，这里是 FUNNEL 的 CSS，虽然我在我认为的 Codepen 上找到了:
.center-text{
text-align: center;
margin: 0px auto;
}
.funnel{
width:750px;
margin: 0 auto;
}
ul.one {
margin: 40px 278px; padding: 0;
list-style: none;
text-align: center;
}
.one .funnel-top {
position: absolute;
top: -7px;
left: -199px;
z-index: 20;
width: 599px;
height: 14px;
background: #919eb1;
border-radius: 100%;
}
.one .funnel-bottom {
position: absolute;
bottom: -7px;
left: -20px;
z-index: 20;
width: 240px;
height: 16px;
background: #273445;
border-radius: 100%;
}
.one li {
font-size:16px;
line-height:70px;
height:70px;
width:200px;
position:relative;
background:#ccc;
color: #ffffff;
font-weight: bold;
}
.one li span {
background: rgba(255,255,255,0.3);
padding: 5px 8px;
border-radius: 4px;
margin-left: 15px;
}
.one li:before {
content: "";
position: absolute;
z-index: 10;
left: 0%;
margin-left: -30px;
width:30px;
border-top: 70px solid #ccc;
border-left: 30px solid transparent;
}
.one li:after {
content: "";
position: absolute;
z-index: 10;
right: 0%;
margin-left: 30px;
width:30px;
border-top: 70px solid #ccc;
border-right: 30px solid transparent;
}
.one li:nth-child(1) { background:#919eb1; }
.one li:nth-child(1):before,
.one li:nth-child(1):after { border-top-color:#919eb1; }
.one li:nth-child(1):before { width:200px; margin-left: -200px; }
.one li:nth-child(1):after { width:200px; margin-right:-200px; }
.one li:nth-child(2) { background:#8491a5; }
.one li:nth-child(2):before,.one li:nth-child(2):after { border-top-color:#8491a5;}
.one li:nth-child(2):before { width:170px; margin-left: -170px; }
.one li:nth-child(2):after { width:170px; margin-right:-170px; }
.one li:nth-child(3) { background:#778599; }
.one li:nth-child(3):before,
.one li:nth-child(3):after { border-top-color:#778599; }
.one li:nth-child(3):before { width:140px; margin-left: -140px; }
.one li:nth-child(3):after { width:140px; margin-right:-140px; }
.one li:nth-child(4) { background:#6d7b8f; }
.one li:nth-child(4):before,
.one li:nth-child(4):after { border-top-color:#6d7b8f; }
.one li:nth-child(4):before { width:110px; margin-left: -110px; }
.one li:nth-child(4):after { width:110px; margin-right:-110px; }
.one li:nth-child(5) { background:#606f84; }
.one li:nth-child(5):before,
.one li:nth-child(5):after { border-top-color:#606f84; }
.one li:nth-child(5):before { width:80px; margin-left: -80px; }
.one li:nth-child(5):after { width:80px; margin-right:-80px; }
.one li:nth-child(6) { background:#536075; }
.one li:nth-child(6):before,
.one li:nth-child(6):after { border-top-color:#536075; }
.one li:nth-child(6):before { width:50px; margin-left: -50px; }
.one li:nth-child(6):after { width:50px; margin-right:-50px; }
ul.two {
margin: 40px 278px; padding: 0;
list-style: none;
text-align: center;
}
.two .funnel-top {
position: absolute;
top: -7px;
left: -199px;
z-index: 20;
width: 599px;
height: 14px;
background: #1b99e6;
border-radius: 100%;
}
.two .funnel-bottom {
position: absolute;
bottom: -7px;
left: -20px;
z-index: 20;
width: 240px;
height: 16px;
background: #003352;
border-radius: 100%;
}
.two li {
font-size:16px;
line-height:70px;
height:70px;
width:200px;
position:relative;
background:#ccc;
color: #ffffff;
font-weight: bold;
}
.two li span {
background: rgba(255,255,255,0.3);
padding: 5px 8px;
border-radius: 4px;
margin-left: 15px;
}
.two li:before {
content: "";
position: absolute;
z-index: 10;
left: 0%;
margin-left: -30px;
width:30px;
border-top: 70px solid #ccc;
border-left: 30px solid transparent;
}
.two li:after {
content: "";
position: absolute;
z-index: 10;
right: 0%;
margin-left: 30px;
width:30px;
border-top: 70px solid #ccc;
border-right: 30px solid transparent;
}
.two li:nth-child(1) { background:#1b99e6; }
.two li:nth-child(1):before,
.two li:nth-child(1):after { border-top-color:#1b99e6; }
.two li:nth-child(1):before { width:200px; margin-left: -200px; }
.two li:nth-child(1):after { width:200px; margin-right:-200px; }
.two li:nth-child(2) { background:#148ad3; }
.two li:nth-child(2):before,.two li:nth-child(2):after { border-top-color:#148ad3;}
.two li:nth-child(2):before { width:170px; margin-left: -170px; }
.two li:nth-child(2):after { width:170px; margin-right:-170px; }
.two li:nth-child(3) { background:#117fc3; }
.two li:nth-child(3):before,
.two li:nth-child(3):after { border-top-color:#117fc3; }
.two li:nth-child(3):before { width:140px; margin-left: -140px; }
.two li:nth-child(3):after { width:140px; margin-right:-140px; }
.two li:nth-child(4) { background:#0b75b6; }
.two li:nth-child(4):before,
.two li:nth-child(4):after { border-top-color:#0b75b6; }
.two li:nth-child(4):before { width:110px; margin-left: -110px; }
.two li:nth-child(4):after { width:110px; margin-right:-110px; }
.two li:nth-child(5) { background:#006bac; }
.two li:nth-child(5):before,
.two li:nth-child(5):after { border-top-color:#006bac; }
.two li:nth-child(5):before { width:80px; margin-left: -80px; }
.two li:nth-child(5):after { width:80px; margin-right:-80px; }
.two li:nth-child(6) { background:#005f98; }
.two li:nth-child(6):before,
.two li:nth-child(6):after { border-top-color:#005f98; }
.two li:nth-child(6):before { width:50px; margin-left: -50px; }
.two li:nth-child(6):after { width:50px; margin-right:-50px; }
最佳答案
我看到没有人回答你，这很简单所以就在这里。看我的例子，你所要做的就是用不同的名字创建不同的关键帧，并用你想要的那个声明每个动画。
您可以在声明animation 属性时为每个元素声明不同的时间或重复参数。
@keyframes leftToRight{
0% {left: 0%;}
100% {left: 100%;}
}
@keyframes rightToLeft{
0% {right: 0%;}
100% {right: 100%;}
}
#image_1{
top: 45%;
left: 0%;
border: 1px solid red;
animation: leftToRight 5s 1;
}
#image_2{
top: 45%;
right: 0%;
border: 1px solid green;
animation: rightToLeft 5s 1;
}
#image_3{
top: 69%;
right: 0%;
border: 1px solid blue;
animation: rightToLeft 3s 3;
}
html, body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
height: 100%;
}
.image{
position: absolute;
width: 42px;
height: 42px;
}<div class="container">
<div id="image_1" class="image"> </div>
<div id="image_2" class="image"> </div>
<div id="image_3" class="image"> </div>
</div>关于jquery - 在多个图像上使用多个关键帧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48116028/