-
-
Save yomete/ffb23bbd15f30a0c2e0cab8bfec376c0 to your computer and use it in GitHub Desktop.
Animation property
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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