CSS3转换链接 [英] CSS3 transitions chaining

问题描述

什么是一个句法清洁的解决方案，在一个元素上逐个运行一个单独的CSS3过渡链？示例：

What is a syntactically clean solution to run a chain of individual CSS3 transitions on a single element, one by one? An example:

• 设置左为10px，不透明度为1至200ms


• 到500毫秒


• 设置为50像素，不透明度为0到200毫秒

没有JavaScript？如果没有，如何用JavaScript干净地编码？

Can this be done without JavaScript? If not, how to code it cleanly with JavaScript?

推荐答案

我相信你想要一个CSS3动画，你在动画中的不同点定义CSS样式，浏览器执行补间为你。以下是其中一个说明： http://css3.bradshawenterprises.com/animations/ 。

I believe you want a CSS3 animation where you define the CSS styles at different points in the animation and the browser does the tweening for you. Here's one description of it: http://css3.bradshawenterprises.com/animations/.

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

You will have to check on browser support for your targeted browsers.

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

Here's a demo that works in Chrome. The animation is pure CSS3, I only use Javascript to initiate and reset the animation:

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

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

The CSS could be modified to make it work in Firefox 5+ also.

#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转换链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！