Skip to content

Instantly share code, notes, and snippets.

@yomete
Forked from hopearmstrong/Animation property.csv
Created April 8, 2019 08:55
Show Gist options
  • Save yomete/ffb23bbd15f30a0c2e0cab8bfec376c0 to your computer and use it in GitHub Desktop.
Save yomete/ffb23bbd15f30a0c2e0cab8bfec376c0 to your computer and use it in GitHub Desktop.
Animation property
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
animation-fill-mode Specifies what values are applied by the animation outside the time it is executing
animation-play-state Specifies whether the animation is running or paused
initial default value
inherit inherited from the parent element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment