CSS Animation features

"Animation features in CSS3"

/*1.Transition functionality, which is too much to be accomplished by specifying the start end state. *//*transition:property Duration timing-function*/transition-property:background-color;transition-duration:3s;transition-timing-function:linear;transition: Background-color 3s linear; /*A concise notation*/transition:background-color 1s linear,color 1s linear,width 1s linear;/*perform multiple animation effects at the same time*//*2.Animations function, you can specify frames to achieve complex animations. */@-webkit-keyframes MyColor{0%/*Start Frame*/{Background-color:Red; }40%/*Background color change frame-yellow*/{Background-color:#ffff00; }70%/*Background color change frame-blue*/{Background-color:Aqua; }100%/*End Frame*/{Background-color:Red; }}div:hover{-webkit-animation:MyColor 5s Linear; }/*animations that implement multiple property values while changing*/@-webkit-keyframes MyColor{0% {Background-color:Red;Transform:Rotate (0deg); }30%{Background-color:Aqua;Transform:Rotate (30deg); }60%{Background-color:Lightskyblue;Transform:Rotate ( -30deg); }100%{Background-color:Red;Transform:Rotate (0deg); }}div:hover{-webkit-animation-name:MyColor;-webkit-animation-duration:5s;-webkit-animation-timing-function:Linear;}/*parameter meaning*//*linear: Constant speed ease-in: Slow to fast ease-out: from fast to slow ease: first slow and then fast again slow ease-in-out: Slow and fast again slow*/

View Code

CSS Animation features