Inspiring

Answered

(CSS) Better to animate via 'keyframes' or 'transition'?

Forum|Forum|7 years ago
December 10, 2018
3 replies
2320 views

As a career visual designer who likes to dabble in web programming -- and began the process of "catching up" to today's advancements after 4-5 years away from the programming side of things -- I was ecstatic to learn that CSS-only animations are now a thing.

Here is the basic method I researched and already began employing :

a:hover {
     animation: links .3s 1;
     filter: brightness(125%);
}
@keyframes links {
     from { filter: brightness(100%); }
     to { filter: brightness(125%); }
}

However, I just this morning came across this random bit of someone else's code :

a {
transition: opacity 3s;
}
a:hover {
opacity: .8;
}

As much as the first solution works, the second seems to require way less code.

So the question becomes, if I wanted every <a> tag to react on mouseover via a short 3s animation (using either 'opacity' or 'filter:brightness') how would I go about it in 2018... keyframes, or transition? Or is the question faulty to begin with?

Thanks!

This topic has been closed for replies.

Correct answer ALsp

Sounds like the answer to my question depends on context, so here is that context again : if all I want to do is universally style the <a> selector on mouseover and animate that change, am I better off using 'animation/keyframes' or 'transition'? In other words, this question is specifically about the easiest (least code?) way of animating the restyling of a:hover, specifically.

a:hover is unequivocally best animated by a:hover (no keyframes). If it's a link and you want the link to spin or slowly change background, etc., then there is no usability downside with respect to touch as touch users will simply activate the link and leave the page anyway.

B i r n o u

Legend

just about hovering on touch screen, it can be simulated playing with... Sensor | Android Developers and android.hardware.camera2 | Android Developers

ALsp

Legend

Wow. Where's the CSS Birnou? Can you show us an actual working example? On a side note, it looks like it's only for Android, and it most certainly does not look like CSS - unless my quick scan of the page is inaccurate, that's a really dumb way to approach something that could be solved using very simple JavaScript.

B i r n o u

Legend

I never that was CSS...

ALsp

Legend

Keyframes require no interaction from user. Hover obviously requires the user to hover, which presents problems on touch devices. That's the short story. There are many other iterations of CSS animations beyond your example. Hover is to be avoided unless you don't care about touch devices. There is a third way to animate with CSS and that is to augment with simple class change scripts. We have a free one:

CSS Class Switcher for Dreamweaver

U

Under S.Author

Inspiring

ALsp wrote
Keyframes require no interaction from user. Hover obviously requires the user to hover, which presents problems on touch devices. That's the short story. There are many other iterations of CSS animations beyond your example. Hover is to be avoided unless you don't care about touch devices. There is a third way to animate with CSS and that is to augment with simple class change scripts. We have a free one:
CSS Class Switcher for Dreamweaver

That's actually a good simple explanation of the difference. And no, I'm not leaving hover effects behind on desktop just because mobile is here. You can if you want, but as a designer, I will continue to use every tool at my disposal to enhance the UX until desktops and laptops are extinct.

Sounds like the answer to my question depends on context, so here is that context again : if all I want to do is universally style the <a> selector on mouseover and animate that change, am I better off using 'animation/keyframes' or 'transition'? In other words, this question is specifically about the easiest (least code?) way of animating the restyling of a:hover, specifically.

As for IE, I don't much care about older Internet Explorer versions at this point, but still care about modern-day Edge (and probably will until it stops being shipped w/ Windows).

ALspCorrect answer

Legend

Sounds like the answer to my question depends on context, so here is that context again : if all I want to do is universally style the <a> selector on mouseover and animate that change, am I better off using 'animation/keyframes' or 'transition'? In other words, this question is specifically about the easiest (least code?) way of animating the restyling of a:hover, specifically.

a:hover is unequivocally best animated by a:hover (no keyframes). If it's a link and you want the link to spin or slowly change background, etc., then there is no usability downside with respect to touch as touch users will simply activate the link and leave the page anyway.

pziecina

Legend

css filters do not work in IE, so if you want IE10/11 support do not use.

As for animations, it depends on what you wish to do. Keep the code as simple as possible, use keyframes when you wish to animate at various rates of speed, or to animate multiple properties at one time.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded