1animation-name: scaleUp; /* the name of the corresponding @keyframes rule */
2animation-duration: 2s; /* time to complete one animation cycle */
3animation-delay: 1s; /* when to start */
4animation-timing-function: 2s; /* defines acceleration curves */
5animation-iteration-count: 6; /* repeat animation this many times, default is 1, infinite is an option */
6animation-direction: normal; /* should the animation play forwards, backwards or alternate back and forth? this will change which keyframe plays first and which plays last */
7
8animation-play-state: normal; /* pause and resume the animation - running, paused */
9
10animation-fill-mode: none; /* choose to set CSS property values based on keyframes before/after an animation is played. default is none - none, forwards, backwards, both */
11
12
13 /* shorthand
14 animation: name duration;
15 */
16animation: scaleUp 2s; /* shorthand */
To add an animation you need two things, an animation-name property and a keyframes rule
1.el {
2 animation-name: scaleUp;
3}
4
5@keyframes scaleUp {
6
7}
Each keyframe specifies the values of CSS properties at specific moments of the animation.
The moments can be specified in percentages, e.g. 0% means start, 100% means end. They can also be specified in from and to
1@keyframes scaleUp {
2 0% {
3 transform: scale(0);
4 }
5
6 100% {
7 transform: scale(1);
8 }
9}
is the same as
1@keyframes scaleUp {
2 from {
3 transform: scale(0);
4 }
5
6 to {
7 transform: scale(1);
8 }
9}
You can of course define more than two keyframes
1@keyframes scaleUp {
2 0%, 70% { /* same animations can be provided as comma separated list */
3 transform: scale(0);
4 }
5
6 50% {
7 transform: scale(2);
8 }
9
10 100% {
11 transform: scale(1);
12 }
13}`****`
By default an animation is triggered on browser refresh if you applied it a basic element (and not a state).
If you want an animation to play when an element is hovered, you’ll add the CSS property to the :hover state
1.el:hover {
2 animation-name: scaleUp;
3 animation-duration: 2s;
4}