Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS3 Animation Made Simple with Move.js

DZone's Guide to

CSS3 Animation Made Simple with Move.js

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Move.js is a cool JavaScript library that makes CSS3 animations simple and elegant by implementing a JavaScript syntax with tons of built-in easing functions.

With Move.js, you can do a complex CSS3 animation like a translate to the point (500px, 200px), rotate it by 180deg, scale it by .5, skew it, and alter colors within a 2-second duration with the following simple markup:
move('.square')
  .to(500, 200)
  .rotate(180)
  .scale(.5)
  .set('background-color', '#888')
  .set('border-color', 'black')
  .duration('2s')
  .skew(50, -10)
  .then()
    .set('opacity', 0)
    .duration('0.3s')
    .scale(0.1)
    .pop()
  .end();
Simple, huh? The same animation would be huge and unwieldy in standard CSS, but Move.js makes it simple and elegant.

Check out Move.js on GitHub.

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}