Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

23 followers · 0 following
View GitHub Profile
@GradientAnimator
GradientAnimator / my.css
Created March 17, 2020 01:48
CSS Gradient Animation
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 March 17, 2020 01:55
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584410266733-993.css
Created March 17, 2020 01:57
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584410563839-362.css
Created March 17, 2020 02:02
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584410825898-601.css
Created March 17, 2020 02:07
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584410842126-329.css
Created March 17, 2020 02:07
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584411362510-406.css
Created March 17, 2020 02:16
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584411400716-793.css
Created March 17, 2020 02:16
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / egg-gradient-1584416987080-470.css
Created March 17, 2020 03:49
CSS Gradient Animation
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%}
@GradientAnimator
GradientAnimator / AnimationName-1584420640207-992.css
Created March 17, 2020 04:50
CSS Gradient Animation
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%}