Css动画多状态答案

【问题标题】：Css animation multiple statesCss动画多状态
【发布时间】：2015-04-06 21:36:23
【问题描述】：

我在下面有一个 div 动画，它从下到上反复转换。 0px to -20px to 0px to -20px to 0px.... 但我希望它像这样翻译 0px to -20px to 5px to -20px to 0px to -20px to 5px to -20px to 0px

The demo is here.

HTML

<div id="main">
  <div id="example"></div>
</div>

CSS

#main{
    border-bottom: 1px solid black;
}

#example{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    -webkit-animation: example 0.5s linear 0s infinite alternate;   
}

@-webkit-keyframes example {
    from {transform:translate(0px,0px);}
    to {transform:translate(0px,-20px);}
}

【问题讨论】：

标签： css css-transitions css-animations css-transforms

【解决方案1】：

首先将动画的语法从 to 和 from 更改为基于百分比的 I.E.

来自::

@-webkit-keyframes example {
    to {transform:translate(0px,0px);}
    from {transform:translate(0px,-20px);}
}

到 ::

@-webkit-keyframes example {
    0% {transform:translate(0px,0px);}
    50% {transform:translate(0px,-20px);}
    100% {transform:translate(0px,5px);}
}

现在看到百分比，你可以在任何时候为元素设置动画，DEMOhere

【讨论】：

【解决方案2】：

使用 percertanges 而不是 from 和 to。

DEMO

@-webkit-keyframes example {
    0% {transform:translate(0px,-20px);}
    25% {transform:translate(5px,-20px);}
    50% {transform:translate(0px,-20px);}
    75% {transform:translate(5px,-20px);}
    100% {transform:translate(0px,0px);}
}

如果这是预期的效果，我不会。只需相应更新即可。

【讨论】：