Karaethon Posted February 25, 2019 Share Posted February 25, 2019 In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc. I have no clue what to do, if you can help I will be grateful for all time. Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too? Link to comment Share on other sites More sharing options...
Barand Posted February 25, 2019 Share Posted February 25, 2019 https://css-tricks.com/almanac/properties/a/animation/ Link to comment Share on other sites More sharing options...
Karaethon Posted February 25, 2019 Author Share Posted February 25, 2019 57 minutes ago, Barand said: https://css-tricks.com/almanac/properties/a/animation/ Oh. I can do it in css? Everything I need to do? I saw how it was alternating between two colors but can I randomly alternative between grey and one of the 5 colors? Great site, but now my headache got worse.... Link to comment Share on other sites More sharing options...
Barand Posted February 25, 2019 Share Posted February 25, 2019 Multiple @keyframes? Link to comment Share on other sites More sharing options...
Barand Posted February 25, 2019 Share Posted February 25, 2019 Example <style type='text/css'> body { width: 100%; height: 100%; background-color: #eee; animation: bgfade 15s infinite; } @keyframes bgfade { 0%, 100% { background-color: red; color: white; } 20% { background-color: gray; color: black; } 40% { background-color: blue; color: white; } 60% { background-color: white; color: black; } 80% { background-color: green; color: white; } } </style> Link to comment Share on other sites More sharing options...
Karaethon Posted February 26, 2019 Author Share Posted February 26, 2019 Thank you for your help. I ended up with this (which is a lot like what I just noticed you posted) I was able to drop the shifts to grey that I thought I would need for good color blending but didn't need after testing. body { width: 100%; height: 100%; animation: pulse 60s infinite; overflow-y:auto; } @keyframes pulse { 0% { background-color: #ffffff; } 10%{ color: #ff0000; } 20%{ background-color: #0000ff; } 30%{ color: #00ff00; } 40%{ background-color: #000000; } 50%{ color: #ffffff; } 60%{ background-color: #ff0000; } 70%{ color: #0000ff; } 80%{ background-color: #00ff00; } 90%{ color: #000000; } 100% { background-color: #ffffff; } } Link to comment Share on other sites More sharing options...
Karaethon Posted February 28, 2019 Author Share Posted February 28, 2019 I really like this keyframes animation stuff, I even came up with, and coded, a heartbeat for my image on my page, is there a way to put in a delay between intervals so i can change the heart rate without having to adjust the percentages every time i adjust the cycle length? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.