*{ animation: gradient-anim 18s linear forwards; animation: gradient-anim2 28s linear forwards; animation: gradient-anim3 30s linear forwards; } .right-column{ animation: blur-anim 200s linear forwards; font-size: 1.45rem; font-weight: 400; font-family: 'Times', 'Times New Roman', serif; line-height: 0.9; display: flex; letter-spacing: 1.2px; -webkit-transform: scale (1,9.14); transform-origin: 0 0; margin-bottom: -40%; text-align: justify; } @keyframes blur-anim { 0% { filter: blur(0); } 100% {filter: blur(33px) }; } @keyframes gradient-anim{ 0% { background: transparent;} 100% { background: linear-gradient(to right, red, blue); } } @keyframes gradient-anim2{ 0% { background: transparent;} 100% { background: linear-gradient(to white, yellow, blue); mix-blend-mode: difference; } } @keyframes gradient-anim3{ 0% { background: transparent;} 100% { background: linear-gradient(to right, red, blue); mix-blend-mode: difference; } } navbar { animation: gradient-anim 8s linear forwards; } .right-column:hover { filter: blur(0px); }