css - Infinitely sliding CSS3 gradient -
i have simple animation pulses , forth diagonally, slide endlessly instead of pulsing , forth. here code:
body {margin: 0; padding: 0;} .error-con { background: rgba(255, 0, 89, 1); background: -moz-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 0, 89, 1)), color-stop(100%, rgba(0, 179, 255, 1))); background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%); background: -o-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%); background: -ms-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%); background: linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%); background-size: 400% 400%; -webkit-animation: errorbg 55s ease infinite; -moz-animation: errorbg 55s ease infinite; animation: errorbg 55s ease infinite; height: 100vh; } @-webkit-keyframes errorbg { 0% { background-position: 93% 0% } 50% { background-position: 0% 100% } 100% { background-position: 93% 0% } } @-moz-keyframes errorbg { 0% { background-position: 93% 0% } 50% { background-position: 0% 100% } 100% { background-position: 93% 0% } } @keyframes errorbg { 0% { background-position: 93% 0% } 50% { background-position: 0% 100% } 100% { background-position: 93% 0% } }
<div class="error-con"></div>
i tried removing 50% keyframe made whole thing jump start @ last keyframe. ideas?
the problem gradient. infinite loop should have 4 colors:
i've fixed code in this fiddle
background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);
Comments
Post a Comment