對於網站發行CSS過渡

.learn-more { 
 
     color: #fff; 
 
     font-size: 20px; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     text-transform: none; 
 
     max-width: 155px; 
 
     margin: auto; 
 
     background-color: #363636; 
 
     padding: 8px 25px; 
 
     text-decoration: none; 
 
    } 
 

 
    .learn-more:hover { 
 
     color: #21C8FF; 
 
     transition: .3s ease-in-out; 
 
     -webkit-transition: .3s ease-in-out; 
 
     background-color: #fff; 
 
     text-decoration: none; 
 
    }

<a class="learn-more" href="about.html">Learn More</a>

所以，我是在我的網站工作，我添加了一個CSS過渡，所以當你將鼠標懸停在東西在消失變成紅色。很簡單。我只是用...

過渡：.3s緩和;

-webkit-transition：.3s easy-in-out;

但是，當我停止它只是切斷。我想添加一個轉換，使其淡入到原始顏色。任何人都知道如何做到這一點？

謝謝！

TrifleTower

來源

2017-04-02 TrifleTower

它會幫助，如果你可以創建一個小提琴證明發生了什麼 –

當然我兩分鐘。 – TrifleTower

已添加到帖子中。 – TrifleTower

您只爲懸停狀態指定了轉場。如果您希望轉換保持多個狀態，只需將其添加到.learn-more類。就像這樣：

.learn-more { 
 
     color: #fff; 
 
     font-size: 20px; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     text-transform: none; 
 
     max-width: 155px; 
 
     margin: auto; 
 
     background-color: #363636; 
 
     padding: 8px 25px; 
 
     text-decoration: none; 
 
     /* Moved */ 
 
     transition: .3s ease-in-out; 
 
     -webkit-transition: .3s ease-in-out; 
 
    } 
 

 
    .learn-more:hover { 
 
     color: #21C8FF; 
 
     background-color: #fff; 
 
     text-decoration: none; 
 
    }

<a class="learn-more" href="about.html">Learn More</a>

來源

2017-04-02 14:21:08

這工作！謝謝！ – TrifleTower

這是因爲你使用的:hover狀態的轉換代碼。改爲在原始類中使用它。

.learn-more { 
 
    color: #fff; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-transform: none; 
 
    max-width: 155px; 
 
    margin: auto; 
 
    background-color: #363636; 
 
    padding: 8px 25px; 
 
    text-decoration: none; 
 
    transition: .3s ease-in-out; // here 
 
    -webkit-transition: .3s ease-in-out; // here 
 
} 
 

 
.learn-more:hover { 
 
    color: #21C8FF; 
 
    background-color: #fff; 
 
    text-decoration: none; 
 
}

<a class="learn-more" href="about.html">Learn More</a>

來源

2017-04-02 14:22:56 Sudipto

移動轉變性質直屬.learn-more和遠離:hover狀態。

在這裏看到一個樣本：

.the-div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: limegreen; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -ms-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
} 
 

 
.the-div:hover { 
 
    background: #f50; 
 
}

<div class="the-div"></div>

來源

2017-04-02 14:24:45

對於網站發行CSS過渡

回答

相關問題