Css 动画多状态

Question

我有一个 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);}
}

Answer 1

使用百分比而不是从和到。

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

如果这是想要的效果，我不会。相应更新即可。

Answer 2

首先将动画的语法从 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);}
}

现在用百分比查看，您可以在任何时候为元素设置动画，DEMO here

Css 动画多状态

Css animation multiple states

css

css-transitions

css-animations

css-transforms