[Vuejs]-How to Create ScreenSaver for Web Apps with Vue Js?

by

0👍

✅

Just use some CSS animation you can save a lot of performance and get rid ton of code.

Here I have a simple codepen for you.

animation: color-transition 3s linear infinite alternate;

@keyframes color-transition {
    0% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
    33% {
        background-color: #80D39B;
        border-color: #80D39B;
    }
    66% {
        background-color: #BE3E82;
        border-color: #BE3E82;
    }
    100% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
}

https://codepen.io/sontd/pen/MWgPYom

Add more keyframes with different colors to get more transition, don’t forget to increase the transition duration too.

Leave a comment