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.

Stayed Informed - CSS Properties Values and Examples

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!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2