Skip to content

Instantly share code, notes, and snippets.

We can make this file beautiful and searchable if this error is corrected: It looks like row 8 should actually have 2 columns, instead of 1. in line 7.
Value,Description
animation-name,This is the name of the keyframe you want to bind to the selector. Keep an eye on this one when you read the keyframes section below.
animation-duration,The length of animation in seconds or milliseconds. Note: Always specify the animation-duration property. Otherwise the duration is 0 and will never be played.
animation-timing-function,"The speed curve of the animation. Eg: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit"
animation-delay,"Defined in seconds (s) or milliseconds (ms), it’s the length of a delay before the animation will start. Note: If given a negative value, it will start playing as if it had been playing for a given amount of time."
animation-iteration-count,The number of times an animation should be played. Eg: any numerical number
animation-direction,"Play the animation in reverse or alternate cycles. Eg: normal, reverse, alternate, alternate-reverse, initial, inherit"
animati
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {