MoeTalks Posted May 6 Share Posted May 6 Both of these blocks are .sqs-shapes. I have two different colors on each shape that I want to fade in but only up to 50%. The problem is they keep going to 100% and I can't for the life of me figure out why? I read something about jQuery and using fadeTo{} but that looked complicated for what I want. I know the opacity can be at 50% because when I remove the animation and just use 50% it works. But I have the blocks on top of a video that gives it a cool affect. See video attached. The only reason I'm having it fade in is because when the page loads the shapes load before the video so you see this start pink/blue color and then the video comes on. Thanks. moetalks.com/home PW 2024 #block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a { animation: fade-me-in 10s; } @keyframes fade-me-in { 0% {opacity:0;} 50% {opacity:1;} } 2024-05-06_17-42-20.mp4 what is should look like.mp4 Link to comment
Ziggy Posted May 7 Share Posted May 7 12 hours ago, MoeTalks said: 50% {opacity:1;} You need to set the opacity to 50% not the animation. Use this: #block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a { animation: fade-me-in 10s; } @keyframes fade-me-in { 0% {opacity:0;} 100% {opacity:0.5;} } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
MoeTalks Posted May 7 Author Share Posted May 7 Good Morning @Ziggy. Thank you for that. It did not work until I modified it by adding .sqs-shape to it since the colors are shapes. Once I did that your original CSS worked perfectly, but with one caveat and maybe you have some insight on this. On yours at 10s, the 50% color just popped in at 0.5. I could clearly see that it was fading in but at that last keyframe, bam, 0.5. I've tried the below thinking that every 1s would increase the fade in by 20% so that the last keyframe wouldn't have that visible contrast. Is there a way to better fade that in or is this the best under the circumstances. 20% could very well make a difference in the fade so not a big deal if it is the best for right now. And thanks again for pointing me in the right direction. #block-9d6cf7bb31c4ae46e470 .sqs-shape, #block-42eab21575a620f1535a .sqs-shape { animation: fade-me-in 6s; } @keyframes fade-me-in { 0% {opacity:0;} 20% {opacity:0.1;} 40% {opacity:0.2;} 60% {opacity:0.3;} 80% {opacity:0.4;} 100% {opacity:0.5;} } Ziggy 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment