Skip to content

Instantly share code, notes, and snippets.

@hopearmstrong
Last active April 8, 2019 08:55
Show Gist options
  • Save hopearmstrong/abcac4380c17a17dd4105b896d2a48b2 to your computer and use it in GitHub Desktop.
Save hopearmstrong/abcac4380c17a17dd4105b896d2a48b2 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