Html CSS动画：图像在最后一秒移动

动画填充模式不工作…所有信息如下

以下是HTML：

 <img id="main5" src="IMAGES4THEDEVICES/iphone6.png" width="300px" height="300px" style="margin-top: -155%; float: left; margin-left: 12%; position: relative; z-index: 3">

<img id="main5" src="IMAGES4THEDEVICES/comp.png" width="300px" height="300px" style="margin-top: -155%; float: left; margin-left: 20%; position: relative; z-index: 2">

我真的不知道我做错了什么。我们可以看到这个例子 正如您在示例中所看到的，所有其他动画（甚至文本动画）都工作得非常好，然后最后一个动画就搞糟了。是的，我试过分开做（例如iphone6.png是main5，然后comp.png是main6），但没有成功

你们需要在我的网站上亲眼看看，这很难解释

非常感谢，

---

山姆（泰勒，创造者）

你知道你不能重复ID…对吗？这些图像都有相同的ID。我刚刚将其更改为#main6…相同的结果。可能需要演示一下。JSFIDLE会很有帮助。好的，请稍等。这是小提琴，它看起来很糟糕，只用于代码。要查看结果，请使用samtestphp.web44.net/newindex.html

#main5 {
    -webkit-animation: move5 2s;
    animation: move5 2s;
-o-animation: move5 2s;
-moz-animation: move5 2s;

animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;

animation-delay: 4.5s;
-webkit-animation-delay: 4.5s;
-o-animation-delay: 4.5s;
-moz-animation-delay: 4.5;

-webkit-animation-iteration-count:1;
-o-animation-iteration-count:1;
-moz-animation-iteration-count:1;
animation-iteration-count:1;


text-decoration: none;

font-family: 'Roboto', sans-serif;
margin-top: -9%;



transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;



}

// here



@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}




@-webkit-keyframes move5
{
    from {
        margin-top: -75%;
    }
    to {
        margin-top: -20%;
    }
}
@keyframes move5
{
    from {
        margin-top: -75%;
    }
    to {
        margin-top: -20%;
    }
}
@-moz-keyframes move5
{
    from {
        margin-top: -75%;
    }
    to {
        margin-top: -20%;
    }
}
@-o-keyframes move5
{
    from {
        margin-top: -75%;
    }
    to {
        margin-top: -20%;
    }
}