为滑块添加过渡缓动

Question

我试图让滑块产生缓动效果，以便图像分别在滑块内加载1s和2s。

这是我到目前为止的代码

http://jsfiddle.net/kNZLx/

我希望.figure延迟1秒，然后.shadow数字加载1s并从右向左滑入。

我的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;}
}

您可以在此设置基于您希望它发生的整个动画的持续时间百分比。