41 lines
1.3 KiB
CSS
Executable File
41 lines
1.3 KiB
CSS
Executable File
@keyframes example {
|
|
0% {background-color: red;}
|
|
25% {background-color: yellow;}
|
|
50% {background-color: blue;}
|
|
100% {background-color: green;}
|
|
}
|
|
|
|
/* ### EXAMPLE SETTING CODE ###
|
|
animation-name: example;
|
|
animation-duration: 4s;
|
|
animation-iteration-count: 2;
|
|
animation-direction: alternate-reverse;
|
|
animation-delay: -2s;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: ease-in-out;}
|
|
|
|
### SAME ABOVE ANIMATION IN ONE LINE CODE ###
|
|
animation: example 5s linear 2s infinite alternate;
|
|
*/
|
|
|
|
@keyframes bumping {
|
|
0% {text-shadow: 0 0 0 yellow;}
|
|
50% {text-shadow: 0 0 5px yellow;}
|
|
100% {text-shadow: 0 0 0 yellow;}
|
|
}
|
|
|
|
@keyframes bumping_red_bg {
|
|
0% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
|
|
30% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
|
|
70% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
|
|
90% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
|
|
}
|
|
|
|
@keyframes bumping_green_bg {
|
|
0% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
|
30% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
|
|
70% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
|
90% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
|
|
100% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
|
|
}
|