单向动画

Question

我目前正在使用宽度变化的经典过渡。

transition: width 0.6s ease;

（http://jsfiddle.net/qzbd8mpc/）

我希望动画只能从左到右，从右到左应该是即时的。

是否可以在纯CSS中执行此操作（不使用javascript删除类）？

编辑：显示好用例的新小提琴。

Answer 1

您可以使用动画而不是过渡 所以你只能使用css3来实现它  css代码如下：

div {
    width: 100px;
    height: 50px;
    background: black;
    color: white;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

 /* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
     from {width: 100px;}
     to {width: 400px;}
 }

 /* Standard syntax */
 @keyframes myfirst {
        from {width: 100px;}
      to {width: 400px;}
  } 

在这种情况下，您不需要javascript 您可以指定更改将以百分比形式发生的时间，或者您可以使用关键字“from”和“to”（表示0％和100％）。

0％表示动画的开始，100％表示动画完成。 当动画结束时，它会变回原来的风格。