Question

什么是语法上干净的解决方案，在一个元素上逐个运行单个CSS3转换链？一个例子：

向左设置为10px，不透明度设置为1到200ms
向左设置为30px到500ms
向左设置为50px，不透明度设置为0到200ms

这可以在没有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解决方案。超时或“过渡”事件可用于实现此目的。

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

CSS3过渡链接

2 个答案: