什么是语法上干净的解决方案，在一个元素上逐个运行单个CSS3转换链？一个例子：
- 将左侧设置为10px，将不透明度设置为1到200ms
- 设置为30px到500ms
- 将左侧设置为50px，将不透明度设置为0到200ms
这可以不用JavaScript吗？如果没有，如何使用JavaScript干净地编码？
什么是语法上干净的解决方案，在一个元素上逐个运行单个CSS3转换链？一个例子：
这可以不用JavaScript吗？如果没有，如何使用JavaScript干净地编码？
我相信你想要一个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;
}
我相信你想要一个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;
}
在纯CSS中，可以使用 过渡延迟 财产，你可以延迟第二次和第三次过渡。
我个人更喜欢JS解决方案。超时或“过渡”事件可用于实现此目的。
我也建议 script.aculo.us （或beta v2： scripty2），它专门用于使这些事情的编程高效和简单。