DEV Community

CatatanIB
CatatanIB

Posted on

Gradient Animator AnimationName-1674296757141-774.css

how to use the gradient animator please see on the website bangmatz

.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%}
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)