The latest articles on DEV Community by CatatanIB (@catatanib). https://dev.to/catatanib https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1012231%2F7901047b-9575-4f02-9a52-ba02db93bed9.jpg https://dev.to/catatanib en CatatanIB Sat, 21 Jan 2023 10:37:23 +0000 https://dev.to/catatanib/gradient-animator-animationname-1674296757141-774css-bec https://dev.to/catatanib/gradient-animator-animationname-1674296757141-774css-bec <p>how to use the gradient animator please see on the website <a href="https://www.bangmatz.blogspot.com">bangmatz</a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>.css-selector { background: linear-gradient(270deg, #3a80b4, #1df3fd, #45fcb7); background-size: 600% 600%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; -o-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } @-moz-keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } @-o-keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } @keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } </code></pre> </div> css gradientanimator animation website