CSS3 13 - CSS3 Animations | Keyframes in CSS | CSS animation using keyframes | Animation without JS

Published: 07 January 2019
on channel: Ankpro Training

409

CSS3 Animations
CSS allows us to do animation without using JavaScript.

Specify some Keyframes for the animation.

As many times you want can change a CSS properties.

Animation needs to be defined with the @keyframes at rule which is then called with the animation property.

Animation Properties :
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

Keyframes Syntax :-
@keyframes name
{
fromvalue{property: value;}
tovalue {property: value;}
}

Keyframes example :
@keyframes example
{
0%{background-color: red;}
20%{background-color: blue;}
60%{background-color: tan;}
100%{background-color: pink;}
}

Animations for Cross Browser

@-moz-keyframes example{background-color: red;} //Mozilla Browser
@-webkit-keyframes example{background-color: red;} //Chrome Browser
@-o-keyframes example{background-color: red;} // Opera Browser

On this page of the site you can watch the video online CSS3 13 - CSS3 Animations | Keyframes in CSS | CSS animation using keyframes | Animation without JS with a duration of hours minute second in good quality, which was uploaded by the user Ankpro Training 07 January 2019, share the link with friends and acquaintances, this video has already been watched 409 times on youtube and it was liked by 12 viewers. Enjoy your viewing!

306,476

8.8K