html - 为什么我的 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与决议