Have already learned a css3 in Transition ( css3 animation attributes), the Transform (css3 deformation properties). Today to learn another css3 animation property animation , is this similar to our animate in jQuery ?
We also know that transitions can change from one state to another. The code is similar to: transition:color 0.2s easy-in-out .1s;
So why do you need this animation attribute? The reason may be that the transition is too limited, and the animation can be used to perform several state transitions by percentage. From 0% to 20% to 40%. Up to 60% to 100%. Yes, this is where the function of this animation is.
CSS3 animation
Using CSS3, we can create animations that can replace many web animated images, Flash animations and JavaScript .
CSS3 keyframe rules
To create CSS3 animations, you must understand @Keyframes .
The rule for @keyframes is to create animations. The CSS styles and animations specified in the @Keyframe rules will gradually change from the current style to the new style.
Browser support
@keyframes IDENT {
from {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
to {
Properties: Properties value;
}
}
/*or all written as a percentage:*/
@keyframes IDENT {
0% {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
100% {
Properties: Properties value;
}
}
@keyframes myfirst {
from {
background: red;
}
to {
background: yellow;
}
}
@-moz-keyframes myfirst /* Firefox */
{
from {
background: red;
}
to {
background: yellow;
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
background: red;
}
to {
background: yellow;
}
}
@-o-keyframes myfirst /* Opera */
{
from {
background: red;
}
to {
background: yellow;
}
}
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}
The properties of animation have the following contents:
-webkit-animation-name: 'wobble'; /* animation property name, which is the animation name defined by our previous keyframes */
-webkit-animation-duration: 10s; /* animation duration */
-webkit-animation-timing -function: ease-in-out; /* The animation frequency is the same as the transition-timing-function */
-webkit-animation-delay: 2s;/* animation delay time*/
-webkit-animation-iteration-count: 10; /* define the loop data, infinite is unlimited */
-webkit-animation-direction: alternate; /* define the animation mode */
Post your comments / questions
Recent Article
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
Related Article