CSS 动画错误答案

【问题标题】：CSS Animation ErrorCSS 动画错误
【发布时间】：2015-05-27 00:37:03
【问题描述】：

我正在尝试创建一个仅限 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”在下落时不旋转？

【问题讨论】：

你在问问题吗？
那么问题出在哪里？
@SeanStopnik 现在要编辑。

标签： html css animation css-animations

【解决方案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>

【讨论】：

谢谢！如何使其正常翻译而不是基于旋转进行翻译？
@JakAttk123 使用另一种技术，例如top 属性而不是translate，也许会有帮助。
为此我需要给它position: absolute吗？
我添加了 position: relative 和 transition: top 2s 但跨度仍然传送到底部而不是平稳下降。

【解决方案2】：

首先，您一次只能设置一个转换属性。如果要组合 2，请将它们设置在逗号分隔列表中。（ROX 在这点上是对的）。

其次，转换的顺序很重要。如果您希望跨度在旋转时移动，则顺序必须是您在 sn-p 中看到的顺序。

我还更改了变换原点，使其在视觉上更平滑，并且出于同样的原因将动画更改为线性。当然，你可以随意调整它

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

&lt;span class="animateone"&gt;A&lt;/a&gt;

【讨论】：