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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.