Single purpose classes to help you orchestrate CSS animations
Branch: master
Clone or download
Latest commit 407f1a9 Jan 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
src
LICENSE.txt Initialize project from tachyons-widths module Jul 31, 2017
README.md Flesh out documentation Aug 9, 2017
index.html Remove GA Jan 14, 2019
package.json Initialize project from tachyons-widths module Jul 31, 2017

README.md

tachyons-animate

Single purpose classes to help you orchestrate CSS animations

I made this project to help me get more out of my animations. It's inspired by tachyons and intended to be an extension of the toolkit. There are NO animation keyframes, only single purpose classes that control:

  • animation-play-state : .pause
  • animation-iteration-count : .infinite, .double, .triple
  • animation-direction: .reverse, .alternate, .alternate-reverse

Documentation

Let's say you use Animate.css (not required) for your animations but you want to stagger a few animations with a delay, or you want to tweak the duration, or run it in reverse. tachyons-animate helps you with this.


Base:
	a = animation duration
	d = animation delay

Modifiers
	1 = 1st step (150ms)
	2 = 2nd step (300ms)
	3 = 3rd step (450ms)
	4 = 4th step (600ms)
	5 = 5th step (750ms)
	6 = 6th step (900ms)

	-1 = literal value 1s
	-2 = literal value 2s
	-3 = literal value 3s

To add a 300ms delay to an element's animation, you'd simply add .d2. To change the duration to 400ms, add .a4. If you want to play it in reverse, add .reverse.

<div class="animated fadeIn a4 d2 reverse"></div>

If the linear timing function is too boring for you, we've included additional bezier curves to help you out. Here's the whole list:

  • .ease
  • .ease-in
  • .ease-in-quad
  • .ease-in-cubic
  • .ease-in-quart
  • .ease-in-quint
  • .ease-in-expo
  • .ease-in-circ
  • .ease-out
  • .ease-out-quad
  • .ease-out-cubic
  • .ease-out-quart
  • .ease-out-quint
  • .ease-out-expo
  • .ease-out-circ
  • .ease-in-out
  • .ease-in-out-quad
  • .ease-in-out-cubic
  • .ease-in-out-quart
  • .ease-in-out-quint
  • .ease-in-out-expo
  • .ease-in-out-circ

TODO:

  • Host on CDN
  • Make public NPM package