Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save GradientAnimator/216df9b578078c9de8035e85be435939 to your computer and use it in GitHub Desktop.
Save GradientAnimator/216df9b578078c9de8035e85be435939 to your computer and use it in GitHub Desktop.
CSS Gradient Animation
.css-selector {
� � � � background: linear-gradient(
334deg
, #1bdaa9, #da241b);
� � � � background-size:
400% 400%;
� � � � -webkit-animation:
AnimationName
11s ease infinite;
� � � � -moz-animation:
AnimationName
11s ease infinite;
� � � � -o-animation:
AnimationName
11s ease infinite;
� � � � animation:
AnimationName
11s ease infinite;
}
@-webkit-keyframes
AnimationName {
� � � � 0%{background-position:
0% 50%}
� � � � 50%{background-position:
100% 50%}
� � � � 100%{background-position:
0% 50%}
}
@-moz-keyframes
AnimationName {
� � � � 0%{background-position:
0% 50%}
� � � � 50%{background-position:
100% 50%}
� � � � 100%{background-position:
0% 50%}
}
@-o-keyframes
AnimationName {
� � � � 0%{background-position:
0% 50%}
� � � � 50%{background-position:
100% 50%}
� � � � 100%{background-position:
0% 50%}
}
@keyframes
AnimationName {
� � � � 0%{background-position:
0% 50%}
� � � � 50%{background-position:
100% 50%}
� � � � 100%{background-position:
0% 50%}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment