当前位置：文江博客话题详情

CSS3 过渡链接

发布于 2024-12-02 13:46:58 字数 237 浏览 1 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫之都 2024-12-09 13:46:58

我相信您想要一个 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;
}

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.

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/

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

回复收藏 0 原文