Excellent CSS Ease Generator

An excellent resource on quickly generating CSS animations.

Excerpted from website:

  1. Choose an easing type and test it out with a few effects.
  2. If you don’t quite like the easing, grab a handle and fix it.
  3. When you’re happy, snag your code and off you go.

Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out…yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now.Also, touch-device friendly!

http://matthewlein.com/ceaser/

Advertisements
This entry was posted in CSS3 on by .

About Salvador

Creative Technologist, and Educator with over 10 years of experience in startup, agency, research, and educational positions. Recently, he was the Principal of The Rare Studio, an education-driven practice whose work has been client-featured in over 30 publications, and has helped clients raise up to 1M dollars in vc and investor funding, and increased global awareness of non-profit organizations. As an Educator, he has taught courses on the user-centered design process for mobile applications to future car experiences, experimental typography, intro and advanced web design, and the scientific method for artists and designers. His speaking topics include Frameworks for Designing the Internet of Things, Affordances and Signifiers, and Future Car Experiences. He is proficient in guiding and mentoring transdisciplinary teams through various project types and sizes; in addition to getting his hands dirty with code, making, and designing. Current interests focus on scientific and design-oriented research in the growth and discovery of new business opportunities in the areas of wearables, internet of things, infotainment, and human computer interaction.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s