How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
Two both points yes I know. But also I said you can and that is true, you can. It's supported without a flag, so to me, it's certainly a viable progressive enhancement. This sort of animation is not critical so I'd probably ask why is it not an automatic choice vs the Js and and svg route. But I guess I'm more of the opinion that not everyone can expect the same experience because it's impossible and progressive enhancement offers a way of managing that scope.
That entirely depends on the requirement (most often dictated by the client). If the animation is a fixed one, then sure a pure CSS approach might do, but if you need anything dynamic such as keyframe animations then that approach won't work.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
I am not pro css only. I'm pro native specifications. I didn't say anything about not using JavaScript, I just would use the least I could get away with. I have used this method with Web Animations API which is less code than the proposed solution, has documentation etc.
I would base a decision for a particular implementation on browser support, rendering uniformity across browsers, performance, complexity of what you want to do, is it an important feature or just icing, accessibility, and general usability. Sometimes it makes more sense to use JS, and sometimes CSS only. For other types of animation, I would use transitions and @keyframes for simpler animations and certain kinds of effects, for more complex and timed animations I would JS. The nature of web dev is sometimes outcomes can be surprising, so you need to test across browsers to see what you're getting. It may be a requirement to support > 97% of browsers.
In this case, the amount of code is the same, it comes down what is more suitable for your use case. My example is consistent across browsers and has excellent browser support (SVG is native to browsers since around IE9). I am interested to test out the CSS to see how it is. You still need to create a path, which is works the same as SVG I assume? Doing this by hand is cumbersome, so you may still need to jump into an editor. The coordinate system for the path in CSS has a big question mark for me, "M20 20", what unit is 20? Is it responsive (scalable) like SVG?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Two both points yes I know. But also I said you can and that is true, you can. It's supported without a flag, so to me, it's certainly a viable progressive enhancement. This sort of animation is not critical so I'd probably ask why is it not an automatic choice vs the Js and and svg route. But I guess I'm more of the opinion that not everyone can expect the same experience because it's impossible and progressive enhancement offers a way of managing that scope.
That entirely depends on the requirement (most often dictated by the client). If the animation is a fixed one, then sure a pure CSS approach might do, but if you need anything dynamic such as keyframe animations then that approach won't work.
Web Animations API === dynamic
Right, but now you've stepped into the browser API & javascript which contradicts your above comment, unless I've misunderstood your point.
I am not pro css only. I'm pro native specifications. I didn't say anything about not using JavaScript, I just would use the least I could get away with. I have used this method with Web Animations API which is less code than the proposed solution, has documentation etc.
Gotcha. I agree, the more native APIs we can leverage the better.
I would base a decision for a particular implementation on browser support, rendering uniformity across browsers, performance, complexity of what you want to do, is it an important feature or just icing, accessibility, and general usability. Sometimes it makes more sense to use JS, and sometimes CSS only. For other types of animation, I would use transitions and @keyframes for simpler animations and certain kinds of effects, for more complex and timed animations I would JS. The nature of web dev is sometimes outcomes can be surprising, so you need to test across browsers to see what you're getting. It may be a requirement to support > 97% of browsers.
In this case, the amount of code is the same, it comes down what is more suitable for your use case. My example is consistent across browsers and has excellent browser support (SVG is native to browsers since around IE9). I am interested to test out the CSS to see how it is. You still need to create a path, which is works the same as SVG I assume? Doing this by hand is cumbersome, so you may still need to jump into an editor. The coordinate system for the path in CSS has a big question mark for me, "M20 20", what unit is 20? Is it responsive (scalable) like SVG?