python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
CSS Align Content Property Example [How To]

CSS3 Animation Property Example [How To]

“How to write animation without using JavaScript or Flash”?

A CSS animation allows animation for most of “HTML elements” without using JavaScript or Flash and it can be used to animate many other CSS properties such as color, background-color, height, or width.

When you used CSS animations, you must first specify some @keyframes rule for the animations.


CSS Syntax:-

div {
    width: 300px;
    height: 300px;
    background-color: red;
    animation-name: demo;
    animation-duration: 2s;
    color:#fff;
}

@keyframes demo {
    from {background-color: green;}
    to {background-color: pink;}
}

Example as,

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 300px;
    height: 300px;
    background-color: red;
    animation-name: demo;
    animation-duration: 2s;
    color:#fff;
}

@keyframes demo {
    from {background-color: green;}
    to {background-color: pink;}
}
</style>
</head>
<body>
  <div><b>This is demo CSS for keyframes!</b></div>
</body>
</html>

The Live demo result as,
This is demo CSS for keyframes!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions