神刀安全网

4 top CSS animation frameworks

4 top CSS animation frameworks
Powerful animators like Motion UI are useful CSS tools

There are great sources of inspiration online if you’re getting started with your ownCSS3 animation library. Some you can simply include in your project and start straight away, or you might want to use them to create something custom for your brand or project. If you need more inspiration, you can also find lots of CSS animation andJavaScript examples on CodePen.

Animate.css

This is a solid starting point, containing a massive list of classes you can apply to elements. Simply reference the CSS file, and when you add classes to an element, the animation happens. This works best when adding or removing classes using JavaScript.

Motion UI

This Sass library from ZURB makes it easier to apply custom animations to your UI. It’s a little more involved than Animate.css, but very powerful. You can create and tweak animations to meet your needs, then invoke them using JavaScript.

4 top CSS animation frameworks
GreenSock is capable of creating powerful, complex animations

BounceJS

This is a useful tool if you want to create your own library of animations. It has lots of fun presets and takes the heavy lifting out of writing complex animation code. It uses advanced transform operations to create the animations, which can then be added to your own animation CSS file and applied as you wish.

GreenSock’s GSap

GSAP is a JavaScript animation framework. If you’re creating more complex animations (such as in banner ads or hero images), GSAP offers a set of tools for handling playback, SVG tweening and more. This is great if you want to go further than what can be done in CSS animations, but does present a bit of a learning curve.

This article was originally published in net magazine issue 279. Buy it here .

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 4 top CSS animation frameworks

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址