背景顏色過渡W/O JQuery的

Question

https://codepen.io/codeispoetry/pen/dRKKEY

.back { 
 
    margin: 20px; 
 
    padding: 100px; 
 
    background: yellow; 
 
    font-size: 30px; 
 
}

<div class="back"> 
 

 
    Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip! 
 
    Hosts easily available 
 

 
</div>

我想要的黃色背景應該隨着時間而改變，以黃，但我想通過CSS做的第i個。在StackOverflow上有足夠的解決方案可以與Jquery一起使用，但是我們可以通過CSS來實現這一點，以便它可以在所有瀏覽器上運行。

https://www.w3schools.com/css/css3_animations.asp我試過了，但它回滾到原來的顏色。如何使顏色永久後。

Answer 1

使用下面的更新的代碼。您需要添加「動畫填充模式：轉發」以在動畫完成後停止動畫。

.back { 
    margin: 20px; 
    padding: 100px; 
    font-size: 30px; 
    background-color: yellow; 
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example; 
    animation-duration: 4s; 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
    animation-fill-mode: forwards; 
} 
@-webkit-keyframes example { 
    from {background-color: yellow;} 
    to {background-color: white;} 
} 

@keyframes example { 
    from {background-color: yellow;} 
    to {background-color: white;} 
} 

Answer 2

這可能是你要找的。

.block { 
    background-color: yellow; 
} 

.block:hover { 
    background-color: white; 
    -webkit-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
} 

Answer 3

試試這個代碼

.back { 
 
    margin: 20px; 
 
    padding: 100px; 
 
    // background: yellow; 
 
    font-size: 30px; 
 
} 
 

 
div { 
 
    background-color: red; 
 
    -webkit-animation-name: example; 
 
    /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; 
 
    /* Safari 4.0 - 8.0 */ 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 

 
/* Safari 4.0 - 8.0 */ 
 

 
@-webkit-keyframes example { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: yellow; 
 
    } 
 
} 
 

 

 
/* Standard syntax */ 
 

 
@keyframes example { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: yellow; 
 
    } 
 
}

<div class="back"> 
 

 
    Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip! 
 
    Hosts easily available 
 

 
</div>

Answer 4

您可以使用keyframe animation：

@keyframes background-change { 
    to { background-color: hotpink; } 
} 

.block { 
    animation: background-change 900ms forwards; 
} 

Answer 5

.back { 
    margin:20px; 
    padding: 100px; 
    font-size: 30px; 
    animation-name: changeColor; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
} 

@-webkit-keyframes changeColor { 
    0% { 
    background-color: yellow; 
    } 
    50% { 
    background-color: white; 
    } 
    100%{ 
    background-color: yellow; 
    } 
} 



@keyframes changeColor { 
    0% { 
    background-color: yellow; 
    } 
    50% { 
    background-color: white; 
    } 
    100%{ 
    background-color: yellow; 
    } 
} 

它將改變的時間改變顏色無限量從黃色到白色回黃色，使它看起來光滑。