CSS3 过渡链接

Question

在单个元素上逐个运行一系列单独的 CSS3 过渡的语法上干净的解决方案是什么？一个例子：

• 将左侧设置为 10 像素，不透明度设置为 1 到 200 毫秒
• 在 500 毫秒内将左侧设置为 30 像素
• 将左侧设置为 50 像素，不透明度设置为 0 到 200 毫秒

这可以在没有 JavaScript 的情况下完成吗？如果没有，如何用 JavaScript 干净地编码？

Answer 1

我相信您想要一个 CSS3 动画，您可以在动画的不同点定义 CSS 样式，而浏览器会为您进行补间。这是它的一种描述：http://css3.bradshawenterprises.com/animations/。

您必须检查目标浏览器的浏览器支持。

这是一个在 Chrome 中运行的演示。动画是纯CSS3，我只用Javascript来初始化和重置动画：

http://jsfiddle.net/jfriend00/fhemr/

可以修改 CSS 以使其在 Firefox 5+ 中也能正常工作。

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        left: 10px;
    }
    22% {
        opacity: 1;
    }
    77% {
        left: 30px;
    }
    100% {
        left: 50px;
        opacity: 0;
    }
}

.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}    

Answer 2

在纯 CSS 中，这可以通过 transition-delay 属性来完成，使用它您可以延迟第二个和第三个转换。

我个人想要一个更好的 JS 解决方案。可以使用超时或“transitioned”事件来实现这一点。

我还建议使用 script.aculo.us（或 beta v2：scripty2），它专门设计用于使编程这些事情变得高效和容易。