(评论)
(comments)

原始链接: https://news.ycombinator.com/item?id=38402776

1999 年,CS​​S3 为基于关键帧的动画提供了基本功能,但 20 年后,强大且多功能的 CSS 动画的潜力在很大程度上仍未实现。 当前浏览器对 CSS 动画的支持是有限的,需要大量的前缀语法(“moz-”、“webkit-”)来确保跨平台的兼容性。 jQueryUI 和 Bootstrap 等框架提供了替代选项,提供了比普通 CSS 更广泛的定制可能性,但通常会导致资源使用增加和性能下降。 最近,Bodymovin for Adob​​e After Effects 等工具允许通过 CSS 和 SVG 导出直接创建和编辑 Web 友好的动画。 然而,尽管过去二十年来硬件功能和网络连接取得了显着进步,但网络动画技术仍然主要是一个利基行业。 也许这一领域的停滞状态要归因于像 Adob​​e 这样的公司,它们对 Macromedia 的收购可能阻碍了创新和进步。 相比之下,在企业利益之外开发的工具继续填补空白,例如 Theatre.js 或最近开发的 AnimotionJS,甚至像 GTP-4 这样的新兴技术通过机器学习算法产生了令人印象深刻的结果。 尽管存在局限性和缺点,CSS 动画为创意表达提供了巨大的机会,特别是考虑到快速互联网连接的普遍存在。 此外,结合撤消/重做功能、更灵活的时间表以及改进 UI 设计的建议等反馈可以极大地提高可用性和用户体验。 总体而言,虽然网络动画不断发展,但创造力和表达的潜力仍然巨大,这使其成为任何对数字艺术感兴趣的人值得追求的目标。

相关文章

原文
Hacker News new | past | comments | ask | show | jobs | submit login
Animotion – a visual CSS animation app (cssanimotion.pages.dev)
372 points by marban 3 days ago | hide | past | favorite | 35 comments










The fact that CSS3 was released in 1999 and such an app in 2023 is a cool HN-worthy post shows how easy, accessible/programmable/inspectable keyframe based animation got stuck with not much relief in sight. Flash dropped dead like a decade ago leaving a void, what remains is its husk as Adobe Animate, and droves of so-so frameworks and communities around them. Robust CSS/SVG based animation remained mostly an empty promise. You can find nice examples, sure, but it remains a niche craft.


Worth mentioning that After Effects can export CSS/SVG/canvas animations with the free bodymovin/Lottie plugin. This is my personal go to for creating web key frame animations and elements.

Not every after effects feature is exportable, but it’s the best and most reliable solution I’ve found for this type of workflow, maybe due in part though to my previous experience with AE.

Currently supported features: http://airbnb.io/lottie/#/supported-features



I squarely blame Adobe for this stagnation, because I remember many people predicting that exactly this would happen when they bought Macromedia. Adobe just kills things, on purpose. Steve Jobs gets a side-order of blame.

So happy I don't give those shits money any more. Thanks Serif!



Transitions and Transforms weren't available in 1999. Proper CSS animation with keyframes was first available in 2009 and even then browser support wasn't great -- lots of polyfills like 'moz-' and 'webkit-' were required.

jQueryUI was miles ahead in terms of delivering cross-browser compatible UI animation, so why bother with CSS3 animation which wouldn't work on IE8?



A modern jQuery UI could go such a long way.

I suppose Bootstrap fits this bill in a lot of ways but I feel like jQuery UI was even easier



Problem with jQuery UI was that it was bloated and came right at a time where bootstrap was taking off, IIRC. jQuery mobile didn't help much either.

The theming support was kind of nice though.



I have no problem with this. Animation on the web improves a page 5% of the time and makes it worse 95% of the time.

I don’t need to see any more Flash “Loading…” screens in my lifetime, especially just to see nav menus.

Even with instant broadband loading, the nav menu is better when it’s not animated. The post-masthead features section is better when it’s not animated.



I feel like Flash was a technology that served to bridge the gap until faster cheaper internet and video streaming / hosting became mainstream.

These days, the demand is still there, but too niche, with people primarily using mobile device for content consumptions, and plenty of rich media content available in form of videos.



I've ended up using GSAP in this vacuum for sequencing.

It's a weird heir for all things animation on the web these days, it works great but something about the keyframing/sequencing process seems like it should be supported natively.



CSS as an animation spec is simply inferior so we failed to create an open community of people who cared enough about it - and people kept using other solutions


Browser support has come a long way in this time period as well.

Now we have the tech, and the demand, why aren't there more competitors?



Anybody in the web animation sector likely already has After Effects, which can be made web-ready with the Lottie plugin.


The first thing I wanted to do was to move around keyframes. It seems like that's not yet a feature.


You can use Cut/Paste to change the keyframe position


nicely done. Glad to see the output is CSS, and not some javascript code tied up in a lib.


What a great tool! Got me inspired to play with CSS animations for a bit. I would suggest adding some animation timing functions to the animation presets. Without them, they look a little stale.


Are there any goodways of doing tool tips or hint what icons do on mobile? I do not understand what some icons do, I can test but as is said above no undo!


Undo/redo have been added


This looks great! I love how intuitive the editor is.

For those who need a bit more advanced timeline, check out Theatre.js. Nice to see more motion on the web platform!





This is a different Animotion -- a Revealjs wrapper written in Svelte by "Joy of Code" from Youtube.

I guess from the URLs that the Svelte project predates this one:

https://cssanimotion.pages.dev/ https://animotion.pages.dev/





This is cool! I've also found GPT-4 is really good at generating complex CSS animations


This is really intuitive, even on mobile surprisingly


Agreed.

I was able to instantly edit an animation and add a “squishy” feel - by stretching the element at the keyframes, according to its motion; very satisfying.

One thing I couldn’t find is undo/redo. Is it there on mobile (or desktop for that matter)?



Undo/redo have been added


Thanks for adding this, I find it very useful.

More feedback: I'd like for undo/redo to move me to the keyframe with the change; similar to how a cursor jumps in a text editor during undo/redo. It's a detail though and perhaps you have other features to work on.



That's a great suggestion, thank you. I'll definitely work on implementing it


+100 for undo/redo.


Wow amazing work, very cool tool. Thanks for sharing!


That is so good, works excellently even on mobile. I shall bookmark!


This is an amazing tool. Incredibly useful. Thank you.


Love it!


This is awesome


good stuff. pretty intuitive UI






Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact



Search:
联系我们 contact @ memedata.com