如何为两张图片配置不同的CSS Keyframes动画移动路径？

嘿，我来帮你搞定这个动画问题！你现在遇到的核心问题很明确：两张图片共用了同一个@keyframes规则，所以它们的移动路径完全一样。要实现一张左移、一张右移的效果，我们需要为每张图片单独定义对应的动画规则，再分别绑定到元素上。

另外我注意到你的代码里还有几个小语法错误，这些也会影响功能，先一起修正掉：

• 第一个jQuery脚本里$(function {少了括号，应该是$(function() {，而且空选择器$('')不会选中任何元素，fadeIn效果根本不会执行
• 动态添加CSS的代码里，animation-fill-mode: forwards后面没闭合}和</style>，会导致CSS解析错误
• 动态添加图片的代码末尾引号没闭合，会抛出语法错误

具体修复步骤 #

1. 定义两个独立的Keyframes动画 #

我们为向左移动的图片创建moveLeft动画，向右移动的创建moveRight动画（你可以根据需求调整关键帧的坐标，实现不同的移动路径）：

/* 向左移动的动画 */
@keyframes moveLeft {
  0% { top: 0px; left: 0px; }
  25% { top: 0px; left: -100px; }
  50% { top: 300px; left: -100px; }
  100% { top: 700px; left: -300px; }
}

/* 向右移动的动画 */
@keyframes moveRight {
  0% { top: 0px; left: 0px; }
  25% { top: 0px; left: 100px; }
  50% { top: 300px; left: 100px; }
  100% { top: 700px; left: 300px; }
}

2. 为每张图片绑定对应的动画 #

把上面的动画分别绑定到#girl1和#girl2上，同时修正所有语法问题。

完整修正后的代码 #

下面是修复所有问题后的完整代码，包含独立的动画定义和正确的语法：

<!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; }
.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() { 
  $('.container img').each(function(i) { 
    $(this).delay(i*600).fadeIn('slow'); 
  });
});
</script>
<script>
$( document ).ready(function() {
  // 用模板字符串添加CSS，避免引号嵌套问题
  $('head').append(`
    <style>
      #girl1 {
        position: relative;
        -webkit-animation: moveLeft 5s 1;
        animation: moveLeft 5s 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
      }
      #girl2 {
        position: relative;
        -webkit-animation: moveRight 5s 1;
        animation: moveRight 5s 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
      }
      @keyframes moveLeft {
        0% { top: 0px; left: 0px; }
        25% { top: 0px; left: -100px; }
        50% { top: 300px; left: -100px; }
        100% { top: 700px; left: -300px; }
      }
      @keyframes moveRight {
        0% { top: 0px; left: 0px; }
        25% { top: 0px; left: 100px; }
        50% { top: 300px; left: 100px; }
        100% { top: 700px; left: 300px; }
      }
    </style>
  `);
  
  // 修正图片添加的引号闭合问题
  $('.container').append(`
    <img id='girl1' src='http://www.returnofkings.com/wp-content/uploads/2013/04/prettygirl.jpg' height='auto' width='80px'/> 
    <img id='girl2' src='https://i.pinimg.com/736x/62/b8/6a/62b86a59e23510f5f6e48c5d899782c3--beautiful-people-beautiful-women.jpg' height='auto' width='80px'/>
  `);
});
</script>
</body>
</html>

额外小提示 #

• 我用了ES6模板字符串（反引号）来编写动态代码，这样可以避免引号嵌套的麻烦，代码也更易读。如果需要兼容非常旧的浏览器，你可以把模板字符串改回普通字符串拼接，记得转义内部的双引号。
• 动画里的left和top数值你可以随意调整，完全根据你想要的移动路径来修改，比如要更快/更慢的速度，调整5s这个动画时长即可。

内容的提问来源于stack exchange，提问作者JojoJan