html - CSS 动画错误

Question

我正在尝试创建一个纯 CSS3 动画，它使一个跨度(一个字母)看起来像来回摆动然后在转动时从屏幕上掉下来。这是我的 CSS:

@-webkit-keyframes swing { 
    10% { -webkit-transform: rotate(15deg); } 
    15% { -webkit-transform: rotate(-10deg); } 
    20% { -webkit-transform: rotate(5deg); } 
    25% { -webkit-transform: rotate(-5deg); } 
    30% { -webkit-transform: rotate(2deg); } 
    35% { -webkit-transform: rotate(-1deg); } 
    40% { -webkit-transform: rotate(0deg); } 
    75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
    100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
} 
@keyframes swing { 
    10% { transform: rotate(15deg); } 
    15% { transform: rotate(-10deg); } 
    20% { transform: rotate(5deg); } 
    25% { transform: rotate(-5deg); } 
    30% { transform: rotate(2deg); } 
    35% { transform: rotate(-1deg); } 
    40% { transform: rotate(0deg); } 
    75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
    100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
    display: inline-block;
    -webkit-animation-name: swing; 
    animation-name: swing; 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

结果如下:Result

为什么“A”在下降时不旋转？

Answer 1

你应该把你的转换写成一条语句:

@keyframes swing { 
    75% { transform: rotate(700deg) translate(0, 1500px); }
    100% { transform: rotate(700deg) translate(0, 1500px); }
}

---

已更新

如果想在下落时旋转，应该分别使用两个动画:

@keyframes translate { 
    10% { transform: translate(0, 0); } 
    15% { transform: translate(0, 0); } 
    20% { transform: translate(0, 0); } 
    25% { transform: translate(0, 0); } 
    30% { transform: translate(0, 0); } 
    35% { transform: translate(0, 0); } 
    40% { transform: translate(0, 0); } 
    75% { transform: translate(0, 1500px); }
    100% { transform: translate(0, 1500px); }
}

@keyframes rotate { 
    10% { transform: rotate(15deg); } 
    15% { transform: rotate(-10deg); } 
    20% { transform: rotate(5deg); } 
    25% { transform: rotate(-5deg); } 
    30% { transform: rotate(2deg); } 
    35% { transform: rotate(-1deg); } 
    40% { transform: rotate(0deg); } 
    75% { transform: rotate(700deg); }
    100% { transform: rotate(700deg); }
}

.rotate {
    display: inline-block;
    animation-name: rotate; 
    transform-origin: top center; 
    animation-duration: 5s; 
    animation-fill-mode: both; 
}

.translate {
    display: inline-block;
    animation-name: translate; 
    transform-origin: top center; 
    animation-duration: 5s; 
    animation-fill-mode: both; 
}

<header>
    <h1>W.I.P.<?h1>
    <h2>
        A Text
        <span class="translate">
            <span class="rotate">A</span>
        </span>
        dventure
    </h2>
</header>