CSS 转换:转到一个值，然后转到另一个值

Question

我想通过两个步骤创建一个动画：首先，css 属性转到值 A，完成后转到值 B。在没有jQuery的情况下，单独使用css转换可以做到这一点吗？

我想用纯 CSS 实现这样的事情：

http://jsfiddle.net/t2w2btow/1/

$( document ).ready(function() {
    $( ".red" ).animate({
    left: "100"
  }, 1000, function() {
      $( ".red" ).animate({
        left: "400"
      }, 1000);
  });
});

Answer 1

@keyframes moveLeft {
   0% {left: 0;}
   50% {left: 100px;}
   100% {left 400px;}
}
.red {
   animation: moveLeft 2s forwards;
}

将红色类添加到元素时，应触发 moveLeft 动画。 可以通过改用.red:hover并将鼠标悬停在元素上进行测试。 您可能需要动画和关键帧的浏览器前缀。

Answer 2

你有带有过渡的 steps（） 选项，如果这是你的意思：示例包含 2 个步骤：

.red {
    background: red;
    width: 300px;
    height: 300px;
    position: relative;
    top: 0;
    left: 0;
    transition:left 1s steps(2,end);
}
body:hover .red{
    left:400px;
}

<div class="red"></div>

如果您希望它保留在结束的地方：

.red {
    background: red;
    width: 300px;
    height: 300px;
    position: relative;
    top: 0;
    left: 0;
   transition:left 100000s 0s;/* very long delay freezes it */
    
}
body:hover .red{
    left:400px;
  transition:left 1s steps(2,end);
}

<div class="red"></div>