为滑动条添加过渡效果

Question

我试图得到一个舒缓效果，我的滑块，使图像分别加载1s和2s内的滑块。

这是目前为止我写的代码

http://jsfiddle.net/kNZLx/

我希望。figure有1秒的延迟，然后。shadow figure加载1秒，然后从右向左滑动。

我的sass文件类似于:

  .shadow {
    z-index:-1;
    position:absolute;
    @include single-transition($ease:2s) {
      transition: $ease;
    }
  }

但是代码不起作用!

如有任何建议，不胜感激

Answer 1

我以前用关键帧做过这个，看看http://www.w3schools.com/css/css3_animations.asp

@-webkit-keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在这里你可以根据你想要的整个动画来设置持续时间的百分比。