Template:CurrentStatus/style.css

.ani{ Background:black; Height:30px; Width:30px; Transform-origin:center; Border-radius:100%; Transition:10s; Display:inline-block; Justify-content:center; Align-items:center; Position:relative; animation :ani 5s  linear infinite; } .ani2{ Height:96%; Width:96%; Border-radius:100%; Transform-origin:center; Display:flex; Justify-content:center; Align-items:center; animation :anim3 4s  linear infinite; } @keyframes ani{ from { transform:rotate(0deg); }   to { transform:rotate(360deg); }   0%{        transition: 100s ; color: white ; border:solid 1px red; }   25%{        transition: 100s ; color: white ; border:solid 1px blueviolet; background:deeppink; }   50%{        transition: 100s; border:solid 1px green; Background:black; }   100%{       transition: 100s ; border: solid 1px green; background:aqua; } } .anim{ background:aqua; Border-radius:100%; Height:4px; Width:4px; position:absolute; right:50%; animation :ani3 2s  linear infinite; Transform-origin:center; } @keyframes anim3{ from { transform:rotate(0deg); }   to { transform:rotate(360deg); }    0%{        transition: 50s ; Background:black; }   25%{        transition: 100s ; background:white; }   50%{        transition: 50s; Background:black; }   100%{        transition: 100s ; background:white; } }

.aniof{ Background:red; Height:28px; Width:29px; Transform-origin:center; Border-radius:100%; Transition:10s; display:inline-block; justify-content:center; align-items:center; padding-bottom:2px; } .ani2of{ display:flex; justify-content:center; align-items:center; Height:100%; Width:100%; }

.an{ display:inline-block; Text-align:center; justify-content:center; align-items:center; /* Height:100%; Width:100%;*/ animation :an 10s  linear infinite; } @keyframes an{ from { transform:rotate(0deg); Transition:100s; }   to { transform:rotate(360deg); Transition:100s; } }