CSS循環漸變過渡

Question

我得到了一個問題，我想創建一個CSS循環漸變動畫，但是當我這樣做動畫是非常靜態它不動畫順利下面是我目前正在努力的一個例子。希望你能幫助我。

.slider1 { 
 
    background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important; 
 
} 
 

 
/* css animation not smooth */ 
 
.slider1 { 
 
    opacity: .5; 
 
    animation: myfirst 5s; 
 
    -moz-animation: myfirst 5s infinite; /* Firefox */ 
 
    -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */ 
 
} 
 

 
@-moz-keyframes myfirst { /* Firefox */ 
 
    0% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255)) 
 
    } 
 
    50% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0)) 
 
    } 
 
    100% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) 
 
    } 
 
} 
 

 
@-webkit-keyframes myfirst { /* Safari and Chrome */ 
 
    0% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255)) 
 
    } 
 
    50% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0)) 
 
    } 
 
    100% { 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) 
 
    } 
 
}

<div class="slider1"> 
 
    This some content 
 
    <div class="wsite-spacer" style="height:600px;"></div> 
 
</div>

Answer 1

基本上你gradint頂部有固定的顏色，並在底部的不同顏色。

如果您構建這個gradint爲2個不同的gradint重疊，那麼您可以將一個在底部，並在適當的位置創建一個從色彩變化的變化

div { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: 
 
linear-gradient(to top, transparent, red),  
 
linear-gradient(to right, green, yellow, blue); 
 
    background-size: 100% 100%, 2000% 100%; 
 
    animation: move 5s infinite; 
 
} 
 

 
@keyframes move { 
 
from {background-position: center center, left center;} 
 
to {background-position: center center, right center;} 
 
}

<div></div>

Answer 2

你不能動畫background但你linear-gradient添加塊和改變他們的opacity。

.slider1 { 
 
    opacity: .5; 
 
    position: relative; 
 
} 
 

 
.frame { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
    /* animation for 3 block 5 second each, 3 × 5 = 15 */ 
 
    animation-duration: 15s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
.frame1 { 
 
    animation-name: hide1; 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)); 
 
} 
 

 
.frame2 { 
 
    animation-name: hide2; 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0)); 
 
} 
 

 
.frame3 { 
 
    animation-name: hide3; 
 
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)); 
 
} 
 

 
@keyframes hide1 { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes hide2 { 
 
    33% { 
 
    opacity: 1; 
 
    } 
 
    67% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes hide3 { 
 
    67% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="slider1"> 
 
    This some content 
 
    <div class="wsite-spacer" style="height:600px;"></div> 
 
    <div class="frame frame1"></div> 
 
    <div class="frame frame2"></div> 
 
    <div class="frame frame3"></div> 
 
</div>