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
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article