CSS 转换：转到一个值然后转到另一个值

Question

我想创建一个包含两个步骤的动画：首先 css 属性转到值 A，完成后转到值 B。这可以用 css没有 jQuery?

单独过渡

我想用纯 CSS:

来实现这样的事情

$( 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;
}

当红色 class 添加到元素时，应该会触发 moveLeft 动画。您可以使用 .red:hover 代替并将鼠标悬停在元素上进行测试。您可能需要 animation & keyframes.

的浏览器前缀

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>

CSS 转换：转到一个值然后转到另一个值

CSS transition: go to one value and then to another

css

css-transitions