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
- ModuleNotFounEerror:No module named celery in Django Project
- How to get domain name information from a Domain using Python
- ModulenotFoundError: no module named 'debug_toolbar' -SOLUTION
- How to create superuser in django project hosted in cPanel without terminal
- CSS & images not loading in django admin | cpanel without terminal
- Could not build wheels for mysqlclient, which is required to install pyproject.toml-based projects
- How to sell domain name on Godaddy (2023)
- TemplateSyntaxError at / Could not parse the remainder: ' + 1' from 'forloop.counter0 + 1'
Related Article