Skip to content

Instantly share code, notes, and snippets.

View GradientAnimator's full-sized avatar

GradientAnimator GradientAnimator

View GitHub Profile
.css-selector {
    background: linear-gradient(139deg, #c80707, #00ffbd);
    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:5% 0%}
.css-selector {
    background: linear-gradient(272deg, #246655, #c0ec11);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    -o-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
.css-selector {
    background: linear-gradient(88deg, #000000, #404a87, #000000, #253c70);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 43s ease infinite;
    -moz-animation: AnimationName 43s ease infinite;
    -o-animation: AnimationName 43s ease infinite;
    animation: AnimationName 43s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
.css-selector {
    background: linear-gradient(88deg, #000000, #d68900, #000000, #c37d00);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    -o-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
.css-selector {
    background: linear-gradient(358deg, #000000, #2c314b, #000000, #222d42, #000000);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 16s ease infinite;
    -moz-animation: AnimationName 16s ease infinite;
    -o-animation: AnimationName 16s ease infinite;
    animation: AnimationName 16s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:51% 0%}
.css-selector {
    background: linear-gradient(348deg, #1e67a9, #20d3be, #20d36e);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 12s ease infinite;
    -moz-animation: AnimationName 12s ease infinite;
    -o-animation: AnimationName 12s ease infinite;
    animation: AnimationName 12s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:61% 0%}
.css-selector {
    background: linear-gradient(227deg, #2716dc, #96dc16, #dca116, #dc168e, #dcd016, #dc1616);
    background-size: 1200% 1200%;
    -webkit-animation: AnimationName 52s ease infinite;
    -moz-animation: AnimationName 52s ease infinite;
    -o-animation: AnimationName 52s ease infinite;
    animation: AnimationName 52s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:9% 0%}
.css-selector {
    background: linear-gradient(270deg, #000000, #a8d710);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 6s ease infinite;
    -moz-animation: AnimationName 6s ease infinite;
    -o-animation: AnimationName 6s ease infinite;
    animation: AnimationName 6s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
.css-selector {
    fondo: gradiente lineal ( 29 grados , #f2bfbf, #e7ecb8, #b9debe, #033759, #e387b8, #b2aae1);
    tamaño de fondo:1200% 1200%;
    -webkit-animation: luxy 8sluxxy8s facilita infinita;
    -moz-animation: luxy 8sluxxy8s facilita infinita;
    -o-animation: luxy 8sluxxy8s facilita infinita;
    animación: luxy 8sluxxy8s facilidad infinita;
}
@-webkit-keyframes luxy {
    0%{posición-fondo: 99% 0% }
.css-selector {
    fondo: gradiente lineal ( 29 grados , #f2bfbf, #e7ecb8, #b9debe, #033759, #e387b8, #b2aae1);
    tamaño de fondo:1200% 1200%;
    -webkit-animation: luxy 30sluxxy30 años facilita infinita;
    -moz-animation: luxy 30sluxxy30 años facilita infinita;
    -o-animation: luxy 30sluxxy30 años facilita infinita;
    animación: luxy 30sluxxy30 años facilidad infinita;
}
@-webkit-keyframes luxy {
    0%{posición-fondo: 99% 0% }