CSS3转换链接

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

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

---

没有JavaScript可以做到这一点吗？如果没有，如何用JavaScript干净地编写代码

我相信你想要一个CSS3动画，你可以在动画中的不同点定义CSS样式，浏览器为你做特化。这里有一个描述：

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

这是一个在Chrome上运行的演示。动画是纯CSS3，我只使用Javascript启动和重置动画：

CSS可以修改，使其在Firefox5+中也能工作

#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;
}    

---

在纯CSS中，这可以通过属性完成，使用它可以延迟第二次和第三次转换

我个人希望JS解决方案更好。超时或“转换”事件可用于实现此目的

---

我还建议使用（或beta v2:），它是专门设计的，旨在使编程这类事情变得高效和简单。

此外，您不需要使用单独的属性，它可以包含在转换速记中。Hm，是否可以使用转换延迟方法在一个属性上链接多个转换？这是一个我不知道的很酷的特性，对于更复杂的内容，显然比转换更可读。谢谢快速提示我刚刚了解了自己：使用

translate

而不是

left

top

等是更好的最佳实践。见[和][