为什么我的CSS动画不能播放？

问题描述：

我有一个图像，我想轻轻地上下摆动，但动画并没有像预期的那样缓解。它意味着在路径的顶部和底部缓解，但只能在底部缓解。*我错过了什么？为什么我的CSS动画不能播放？

 img { 
     display: inline-block; 
     margin-right: 16px; 
     margin-top: 10vh; 
     height: 90vh; 
     width: auto; 
     animation: floaty; 
     animation-direction: alternate; 
     animation-iteration-count: infinite; 
     animation-timing-function: ease; 
     animation-duration: 1s; 
    } 

    @keyframes floaty { 
     0% {margin-top: 10vh;} 
     to {margin-top: 14vh;} 
    }

它适用于Chrome，但增加的跨浏览器兼容的动画序列以及 – CodeMonkey

工作正常，在Firefox测试，铬，和Safari http://codepen.io/anon/pen/peBNmv –

@迈克尔科克 - 那个动画在顶部“弹跳”，我不想要。我希望图像看起来像漂浮在海洋上的小船。 –

答

错误地定义了@keyframes的CSS。试试这个：如果您在使用keyframes%

@keyframes floaty { 
    from {margin-top: 10vh;} 
    to {margin-top: 14vh;} 
}

JSFiddle决议

动画仍然错误地放松，并且它在（{0} {...}到{...}）之前工作。 –

答

，到处都是只使用%。

@keyframes floaty { 
    0% {margin-top: 10vh;} 
    100% {margin-top: 14vh;} 
}

动画仍然不正确地放松，并且它在（{0} {...}到{...}）之前工作。 –

为什么我的CSS动画不能播放？

相关推荐