blocks|key|529046|text|变换更像是一个动画。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529047|div.sicon+a+{
++++background:-moz-radial-gradient(left,+#ffffff+24%25,+#cba334+88%25);
++++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+*/
}|code-block|syntax|javascript|529048|所以你需要用一个动作来调用这个动画。|529049|div.sicon+a:hover+{
++++background:-moz-radial-gradient(left,+#cba334+24%25,+#ffffff+88%25);
}|529050|还要检查浏览器的支持，如果你仍然有一些问题，无论你试图做什么！检查样式表中的css覆盖，并检查behavior:+***.htc+css+hacks。可能有什么东西覆盖了你的转换！|offset|length|style|CODE|529051|你应该看看这个：http://www.w3schools.com/css/css3_transitions.asp|529052|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/css3_transitions.asp^0|0|0|0|0|1B|H|0|8|1D|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Transition is more like an animation.

<pre><code>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 */
}
</code></pre>

So you need to invoke that animation with an action.

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

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for <code>behavior: ***.htc</code> css hacks.. there may be something overriding your transition!

You should check this out: <a href="http://www.w3schools.com/css/css3_transitions.asp" rel="noreferrer">http://www.w3schools.com/css/css3_transitions.asp</a>

blocks|key|529090|text|对我来说，就是拥有display:+none;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|529091|#spinner-success-text+{
++++display:+none;
++++transition:+all+1s+ease-in;
}

#spinner-success-text.show+{
++++display:+block;
}|code-block|syntax|javascript|529092|删除它，并改用opacity，修复了这个问题。|529093|#spinner-success-text+{
++++opacity:+0;
++++transition:+all+1s+ease-in;
}

#spinner-success-text.show+{
++++opacity:+1;
}|529094|entityMap^0|9|E|0|0|7|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

For me, it was having <code>display: none;</code>

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

#spinner-success-text.show {
 display: block;
}
</code></pre>

Removing it, and using <code>opacity</code> instead, fixed the issue.

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

#spinner-success-text.show {
 opacity: 1;
}
</code></pre>

blocks|key|529142|text|如果您的页面上任何地方都有一个<script>标记(即使在HTML中，即使它是一个带有src的空标记)，那么transition必须由某个事件激活(页面加载时它不会自动触发)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|529143|entityMap^0|F|8|17|3|1I|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If you have a <code>&lt;script&gt;</code> tag anywhere on your page (even in the HTML, even if it is an empty tag with a <code>src</code>), then a <code>transition</code> must be activated by some event (it won't fire automatically when the page loads).

blocks|key|745631|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|745632|<div+class="foo">
++++/*+whatever+is+required+*/
</div>|code-block|syntax|javascript|745633|CSS：|745634|.foo+{
++++top:+0;
++++transition:+top+ease+0.5s;
}

.foo:hover{
++++top:+-10px;
}|745635|这只是一个基本的转换，当div标签悬停在上面时，它会使其提升10px。可以与class.hover属性一起编辑转换属性值，以确定转换的工作方式。|745636|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

HTML:

<pre class="lang-html prettyprint-override"><code>&lt;div class="foo"&gt;
 /* whatever is required */
&lt;/div&gt;
</code></pre>

CSS:

<pre class="lang-css prettyprint-override"><code>.foo {
 top: 0;
 transition: top ease 0.5s;
}

.foo:hover{
 top: -10px;
}
</code></pre>

This is just a basic transition to ease the div tag up by 10px when it is hovered on.
The transition property's values can be edited along with the class.hover properties to determine how the transition works.

blocks|key|745690|text|某些浏览器不支持该代码。也许可以尝试使用不同的浏览器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|745691|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Some browsers do not support the code. Maybe try using a different browser

I couldn't get transitions to work on <a href="http://ctuchicago.squarespace.com/" rel="noreferrer">this page</a>, anybody has any idea why?

<pre><code>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 */
}
</code></pre>

CSS3 Transition not working

我无法让转换在上工作，有人知道为什么吗？div.sicon a {    transition: background 0.5s linear;    -moz-transition: background 0.5s linear; /* Firefox 4 */    -webkit-transition: back...

问CSS3转换不工作
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3转换不工作EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3转换不工作
EN