multiple animations with transition on one of them

Hey everyone, I've got this code

.contactLinksAnimation {
        outline-color: theme(colors.primaryColor);
        animation-name: contactLinksBlink;
        animation-duration: 0.2s;
        animation-direction: alternate;
        animation-timing-function: linear ease;
        animation-iteration-count: 6;
    }

    @keyframes contactLinksBlink {
        0% {
            outline-offset: 0;
        }

        100% {
            outline-offset: 1em;
        }
    }

.contactLinksAnimation {
        outline-color: theme(colors.primaryColor);
        animation-name: contactLinksBlink;
        animation-duration: 0.2s;
        animation-direction: alternate;
        animation-timing-function: linear ease;
        animation-iteration-count: 6;
    }

    @keyframes contactLinksBlink {
        0% {
            outline-offset: 0;
        }

        100% {
            outline-offset: 1em;
        }
    }

12 Replies

NazCodelandOP•2y ago

I want to also scale the icons, with a delay between each one, so I did this:

    .contactLinksAnimation {
        outline-color: theme(colors.primaryColor);
        animation-name: contactLinksBlink, contactLinksScale;
        animation-duration: 0.2s;
        animation-direction: alternate;
        animation-timing-function: linear ease, ease-in-out;
        animation-iteration-count: 6, 1;
    }

    @keyframes contactLinksBlink {
        0% {
            outline-offset: 0;
        }

        100% {
            outline-offset: 1em;
        }
    }
    @keyframes contactLinksScale {
        0% {
            scale: 1;
        }

        100% {
            scale: 2;
        }
    }

    .contactLinksAnimation {
        outline-color: theme(colors.primaryColor);
        animation-name: contactLinksBlink, contactLinksScale;
        animation-duration: 0.2s;
        animation-direction: alternate;
        animation-timing-function: linear ease, ease-in-out;
        animation-iteration-count: 6, 1;
    }

    @keyframes contactLinksBlink {
        0% {
            outline-offset: 0;
        }

        100% {
            outline-offset: 1em;
        }
    }
    @keyframes contactLinksScale {
        0% {
            scale: 1;
        }

        100% {
            scale: 2;
        }
    }

and on each Icon, I have a separate transition-delay the email Icon has no transition-delay the discord has 300, github has 600

glutonium•2y ago

well, u can maybe do it with css but it's easier to do it with js

NazCodelandOP•2y ago

NazCodelandOP•2y ago

only problem I am having is, I want the scaling to transition, to be smooth for some reason, I can't get it to transition from 1-2 and then back 2-1 I put transition: scale 1s; but it doesn't work

glutonium•2y ago

check out kevins latest video

glutonium•2y ago

https://youtu.be/y8-F5-2EIcg

Kevin Powell

YouTube

10 CSS animation tips and tricks

CSS transitions and animations can be a lot of fun, and there are so many neat tips and tricks you can do with them! 🔗 Links ✅ The CSS challenge video: https://youtu.be/gE5PnHcv3RI ✅ More on prefers-reduced-motion: https://youtu.be/zT9Ftmw0-uc ✅ More information on @property on the MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@propert...

glutonium•2y ago

this might help you

NazCodelandOP•2y ago

perfect, thanks took me awhile but I got it, and it was thanks to a trick in that video

        animation: 
        contactLinksScale 200ms linear var(--animationDelay) 2 alternate,
        contactLinksBlink 200ms linear var(--animationDelay) 2 alternate,
        contactLinksBlink 200ms linear calc(var(--animationDelay) + 1000ms) 2 alternate,
        contactLinksBlink 200ms linear 2100ms 2 alternate;

        animation: 
        contactLinksScale 200ms linear var(--animationDelay) 2 alternate,
        contactLinksBlink 200ms linear var(--animationDelay) 2 alternate,
        contactLinksBlink 200ms linear calc(var(--animationDelay) + 1000ms) 2 alternate,
        contactLinksBlink 200ms linear 2100ms 2 alternate;

thanks again @ʙᴏᴏʙ 2.0

NazCodelandOP•2y ago

NazCodelandOP•2y ago

will have to reduce animation for prefers-reduced-motion of of course

glutonium•2y ago

thank Kevin.. i was just recommending xD but anyways , Welcome

NazCodelandOP•2y ago

@Kevin thanks! xD

Gaming

Programming

multiple animations with transition on one of them