我想要平滑地移動我的具有多種顏色的漸變，但問題是動畫不平滑。它只是在每一步中改變位置。
<style>
.animated {
width: 300px;
height: 300px;
border: 1px solid black;
animation: gra 5s infinite;
animation-direction: reverse;
-webkit-animation: gra 5s infinite;
-webkit-animation-direction: reverse;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes gra {
0% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
}
50% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
}
100% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
}
}
</style>
<div class="animated">
<h1>你好</h1>
</div>
是否可以在不使用jQuery的情況下實現？
我的jsfiddle連結是 https://jsfiddle.net/bAUK6
動態實作Dave的答案：
:root{ --overlay-color-1: #ff0000; --overlay-color-2: #0000ff; --anim-duration: 2s; } #gradient { opacity: 0.8; background: none; } #gradient:after, #gradient:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #gradient:before { background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%); animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate; } #gradient:after { background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%); animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate; } @keyframes OpacityAnim { 0%{opacity: 1.0} 100%{opacity: 0.0} }請嘗試以下程式碼：
#gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} }