在多个图像上使用多个关键帧答案

【问题标题】：using multiple keyframes on multiple images在多个图像上使用多个关键帧
【发布时间】：2018-01-05 14:54:58
【问题描述】：

我正在尝试让关键帧适用于每个图像。所以我实际上想要一个图像到左边，另一个到右边。但是当我运行这段代码时，它只是对两张图片使用完全相同的关键帧。我似乎无法为两个不同的图像制作两条不同的路径。

我将如何解决这个问题？

<!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 mymove)，如果您想为另一张图像使用不同的动画，您必须在样式中创建另一个 keyframes

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

我看到没有人回答你，这很简单，所以就在这里。看我的例子，你所要做的就是用不同的名字创建不同的关键帧，然后用你想要的来声明每个动画。

您可以在声明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">&nbsp;</div>
  <div id="image_2" class="image">&nbsp;</div>
  <div id="image_3" class="image">&nbsp;</div>
</div>

【讨论】：