为什么我的CSS动画没有播放？

Question

我有一张图像，我想轻轻上下摆动，但动画并没有按照预期的方式进行。这意味着在路径的顶部和底部都要放松，但只能在底部缓和。*我缺少什么？

     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;}
    }

Answer 1

@keyframes的CSS定义不正确。试试这个：

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

JSFiddle，分辨率为

Answer 2

如果您在%中使用keyframes，则无处不在仅使用%。

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