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

首先将动画的语法从基于I.E。

的百分比更改为

来自::

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

to ::

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

现在看到百分比，您可以随时为元素设置动画， DEMO here

Css动画多个状态

2 个答案: