Skip to content

Instantly share code, notes, and snippets.

Avatar

GradientAnimator GradientAnimator

View GitHub Profile
@GradientAnimator
GradientAnimator / my.css
Created Mar 17, 2020
CSS Gradient Animation
View my.css
background: linear-gradient(270deg, #0ed7a3, #450469);
background-size: 400% 400%;
-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% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
@GradientAnimator
GradientAnimator / gistName
Created Mar 17, 2020
CSS Gradient Animation
View gistName
background: linear-gradient(270deg, #2bf9c4, #1a5d4c);
background-size: 400% 400%;
-webkit-animation: AnimationName2 30s ease infinite;
-moz-animation: AnimationName2 30s ease infinite;
-o-animation: AnimationName2 30s ease infinite;
animation: AnimationName2 30s ease infinite;
@-webkit-keyframes AnimationName2 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584410266733-993.css
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-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% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584410563839-362.css
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-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% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584410825898-601.css
background: linear-gradient(270deg, #246655, #246655);
background-size: 400% 400%;
-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% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584410842126-329.css
background: linear-gradient(270deg, #3acea8, #e833b1);
background-size: 400% 400%;
-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% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584411362510-406.css
background: linear-gradient(270deg, #deaa33, #a633de);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 75%}
    50%{background-position:100% 26%}
    100%{background-position:0% 75%}
View AnimationName-1584411400716-793.css
background: linear-gradient(270deg, #deaa33, #a633de);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 75%}
    50%{background-position:100% 26%}
    100%{background-position:0% 75%}
View egg-gradient-1584416987080-470.css
background: linear-gradient(270deg, #ff00ff, #ffffff);
background-size: 400% 400%;
-webkit-animation: egg-gradient 0s ease infinite;
-moz-animation: egg-gradient 0s ease infinite;
-o-animation: egg-gradient 0s ease infinite;
animation: egg-gradient 0s ease infinite;
@-webkit-keyframes egg-gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
View AnimationName-1584420640207-992.css
background: linear-gradient(186deg, #713399, #aa71cf);
background-size: 400% 400%;
-webkit-animation: AnimationName 17s ease infinite;
-moz-animation: AnimationName 17s ease infinite;
-o-animation: AnimationName 17s ease infinite;
animation: AnimationName 17s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 87%}
    50%{background-position:100% 14%}
    100%{background-position:0% 87%}