首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS3转换不工作

CSS3转换不工作
EN

Stack Overflow用户
提问于 2011-10-28 08:44:10
回答 5查看 125.3K关注 0票数 26

我无法让转换在this page上工作,有人知道为什么吗?

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-11-18 21:38:11

变换更像是一个动画。

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

所以你需要用一个动作来调用这个动画。

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

还要检查浏览器的支持,如果你仍然有一些问题,无论你试图做什么!检查样式表中的css覆盖,并检查behavior: ***.htc css hacks。可能有什么东西覆盖了你的转换!

你应该看看这个:http://www.w3schools.com/css/css3_transitions.asp

票数 24
EN

Stack Overflow用户

发布于 2018-11-10 18:53:54

对我来说,就是拥有display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

删除它,并改用opacity,修复了这个问题。

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}
票数 24
EN

Stack Overflow用户

发布于 2019-06-27 07:43:17

如果您的页面上任何地方都有一个<script>标记(即使在HTML中,即使它是一个带有src的空标记),那么transition必须由某个事件激活(页面加载时它不会自动触发)。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7924038

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档