Question

我想创建一个包含两个步骤的动画：首先css属性转到值A，当它完成时，转到值B.如果没有jQuery，单独使用css转换是否可以实现？

我想用纯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;
}

将红色类添加到元素时，应触发 moveLeft 动画。您可以使用.red:hover代替并悬停元素进行测试。您可能需要animation & keyframes的浏览器前缀。

Answer 2

如果这是你的意思，你有转换步骤（）选项：示例包含两个步骤：

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想让它保持在它结束的地方：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: