Basics of CSS3 Animations

What are CSS3 Animations?

An animation lets an element gradually change from one style to another.

 Why do we need CSS3 animation?

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

Animation Property

animation-name property

To specify the name of the animation.

div {
 animation-name: example;
 }

animation-duration property

If the property is not specified, the animation will have no effect, because the default value is 0.

div {
 animation-name: example;
 animation-duration: 4s;
 }

 animation-delay property
The animation-delay property specifies a delay for the start of an animation.

div {
 animation-name: example;
 animation-duration: 4s;
 animation-delay: 2s;
 }

animation-iteration-count property

The animation will run for number of times before it stops.

(animation-iteration-count: infinite)  count animation will never stops.

div {
 animation-name: example;
 animation-duration: 4s;
 animation-iteration-count: 3;
 }

animation-direction property

The animation-direction property is used to let an animation run in reverse direction.

div {
 animation-name: example;
 animation-duration: 4s;
 animation-iteration-count: 3;
 animation-direction: reverse;
 }

animation-timing-function property

The animation-timing-function property specifies the speed curve of the animation.

animation-timing-function property value:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n)

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

What you need to know about leveraging tools and frameworks to build highly scalable and maintainable applications.

Shorthand Writing

div {
 animation-name: example;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 }
 to
 div {
 animation: example 5s linear 2s infinite alternate;
 }

What is @keyframes?

 Keyframes hold the styles that elements will have at certain times.

@keyframes example {
 from {background-color: red;}
 to {background-color: yellow;}
 }

keywords “from” and “to” (which represents 0% (start) and 100% (complete)

but we can provide by below also.

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

 Reference sites

https://www.w3schools.com/css/css3_animations.asp

https://daneden.github.io/animate.css/