我不能讓過渡在這一頁上工作，有人知道為什么嗎？

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

對一般問題的一般回答...過渡不能激活自動屬性。如果有一個不工作的轉換，請檢查屬性的起始值是否已顯式設置。

有時，當“開始”或“結束”值為“自動”時，您會想要設置高度和寬度的動畫。(例如，要使一個div折疊，當它的高度為auto且必須保持該高度時。)在這種情況下，請改為將過渡置于最大高度。給max-height一個合理的初始值(大于其實際高度)，然后將其轉換為0。

對我來說，它有顯示:沒有；

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

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

移除它，并使用不透明代替，修復了這個問題。

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

#spinner-success-text.show {
    opacity: 1;
}

過渡更像是一部動畫。

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-overrides，并檢查行為:***。htc css黑客..你的轉變可能會被某些東西所取代！

你應該看看這個:http://www.w3schools.com/css/css3_transitions.asp

如果你有一個& lt腳本& gt標簽(即使在HTML中，即使它是一個帶有src的空標簽)，那么轉換必須由某個事件激活(它不會在頁面加載時自動觸發)。

HTML:

<div class="foo">
    /* whatever is required */
</div>

CSS:

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

這只是一個基本的轉換，當div標簽停留在上面時，將它放大10px。 過渡屬性的值可以與class.hover屬性一起編輯，以確定過渡的工作方式。

如果您正在使用react并且遇到了這個問題，請確保您的組件保存在不同于父組件的其他文件中。我的意思是:

const Parent = () => {
    const ChildComp = () => (
    // element whose transition wont work
    )
    return (
        <div>
           <ChildComp />
        </div>
    )
}

一些瀏覽器不支持該代碼。也許可以嘗試使用不同的瀏覽器