CSS3 Animation Tutorial – CSS3 Animation Reference

Last Updated on: April 16, 2020   Posted By: Web Design Reference

CSS3 Animation Tutorial: Learn CSS3 animation basic concept, Different Type of CSS3 animation properties, CSS3 animation Reference Guide, Know what is CSS3 animation, and CSS3 animation examples. In this page to learn the CSS animation definition, the Purpose of using CSS animation, and how to use CSS animation on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

CSS3 Animation Tutorial: Define CSS Animation with Examples?

CSS3 Animation: Create animation effects using CSS3 Animation property without using any flash script or javascript or animated images (gif images).

Properties of CSS3 Animation:
  • animation
  • @keyframes

CSS3 animation Tutorial: CSS3 animation is created using @keyframe rule, which is actually bind to a selector when it changes from one style to another style.

CSS3
Animation Example

Example: use of CSS3 Animation Property.

#animation-demo {
width: 60px;
height: 40px;
padding: 10px;
background: #1ec7e6;
color: #fff;
position: relative;
font-weight: bold;
font-size: 20px;
-webkit-border-radius: 5px;
animation: animation-demo 5s 1;
-moz-animation: animation-demo 5s 1;
-webkit-animation: animation-demo 5s 1;
-o-animation: animation-demo 5s 1;
}

@keyframes animation-demo {
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(10deg);left:0px;}
50% {transform: rotate(0deg);left:300px;}
75% {transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animation-demo {
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(10deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:300px;}
75% {-webkit-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animation-demo {
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(10deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:300px;}
75% {-moz-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animation-demo {
0% {-o-transform: rotate(0deg);left:0px;}
25% {-o-transform: rotate(10deg);left:0px;}
50% {-o-transform: rotate(0deg);left:300px;}
75% {-o-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-o-transform: rotate(-360deg);left:0px;}
}

 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

Pin0
 

Leave a Reply