I want to move my gradient with multiple colors smoothly, but the problem is that the animation is not smooth. It just changes position at every step.
<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>
Is it possible to achieve this without using jQuery?
My jsfiddle link is https://jsfiddle.net/bAUK6
Dynamic ImplementationDave’s Answer:
Please try the following code: