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.
Animation Example
Example: use of CSS3 Animation Property.
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
- CSS Tutorial and CSS Reference
- CSS Examples
- CSS Media Types Tutorial And Reference
- CSS Selector Tutorial And Reference
- CSS3 Animation Tutorial and CSS3 Reference
- CSS3 Examples
- CSS3 Media Queries Tutorial
- CSS3 Selector Tutorial and CSS3 Selector Reference
- CSS3 Shadow Tutorial and CSS3 Shadow Reference
- CSS3 Transform Tutorial and CSS3 Transform Reference
- CSS3 Transition Tutorial and CSS3 Transition Reference