为滑块添加过渡缓动

Question

我正在尝试为我的滑块添加缓动效果，以便图像在滑块中分别加载 1 秒和 2 秒。

这是我目前的代码

http://jsfiddle.net/kNZLx/

我希望 .figure 有 1s 的延迟，并且 .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;}
}

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