Yangchun March, good people, good things, good mood. It’s also about getting new skills. As a capable person, we targeted the CSS3 animation. As we all know, since CSS3 joined the 3D hardware acceleration, it has changed a B animation execution thread independently executed, making us touch the magic thing of GPU, performance suddenly improved octaves. Many scene application micro-application marketing activities are flooded in our circle of friends. Although CSS3 animation is easy to get started, it still needs a certain depth to be able to use it with ease.
Serial animation
Chestnut: We have a box that I want to translate a little bit, then rotate, scale, fade out.
1. What can we do for you?
-webkit-animation : Ease 0S both, Rotate360 1S Linear 0.8s forward, lessen 1S ease 1.8s forward, FadeOut 1s ease 2.8s forward;
This is implemented with the animation’s comma-separated feature. This writing method has very unique advantages in relation to
- Readable code
- Defined KeyFrames can be reused,
- You can make a string of animations in a minute
The ideal is good, but the reality is cruel, running the above code, we found that the animation is not what we expected, only slideRight can execute properly.
Question:
- SlideRight uses
-webkit-transform : translate(200px); - Rotate360 uses
-webkit-transform : rotate(360deg); - Lessen use is
-webkit-transform : scale(0.5);
The transform of the previous animation will be overwritten when the latter animation is executed. Our next animation will need to be executed with the end frame transform of the previous animation
The following solutions:
@include keyframes (rotate360){
0%{
-webkit-transform : translate(200px) rotate(0deg);
}
100%{
-webkit-transform : translate(200px) rotate(360deg);
}
2. Label stream
This method is to understand the drawbacks described above and implement animation through nested tags
HTML
CSS
.translate { -webkit-animation: slideRight 1s ease 0s both; -ms-animation: slideRight 1s ease 0s both; -moz-animation: slideRight 1s ease 0s both; -o-animation: slideRight 1s ease 0s both; animation: slideRight 1s ease 0s both; Rotate {-webkit-animation: rotate360 1s linear 0.8s both; rotate {-webkit-animation: rotate360 1s linear 0.8s both; -mS-animation: Rotate360 1s Linear 0.8s both; -Animation: Rotate360 1s Linear 0.8s both; -o-animation: Rotate360 1s Linear 0.8s both; Animation: Rotate360 1s Linear 0.8s both; }. Lessen {-webkit-animation: lessen 1s ease 1.8s both; -Ms-animation: Lessen 1s ease 1.8s both; -Moz-animation: Lessen 1s ease 1.8s both; -O-animation: Lessen 1s ease 1.8s both; Animation: Lessen 1s ease 1.8s both; }. FadeOut {-webkit-animation: fadeOut 1s ease 2.8s both; -ms-animation: fadeOut 1s ease 2.8s both; -moz-animation: fadeOut 1s ease 2.8s both; -o-animation: fadeOut 1s ease 2.8s both; Animation: fadeOut 1s ease 2.8s both; }
keyframes
Here is the code pasted with Sass for ease of display
@include keyframes(lessen){ 0%{ -webkit-transform : scale(1); } 100%{-webkit-transform: scale(0.5); } } @include keyframes(fadeOut){ 0%{ opacity: 1; } 100%{ opacity: 0; } } @include keyframes (rotate360){ 0%{ -webkit-transform : rotate(0deg); } 100%{ -webkit-transform : rotate(360deg); } } @include keyframes (slideRight){ 0%{ -webkit-transform : translate(0); } 100%{ -webkit-transform : translate(200px); }}
The order in which the animation is executed is determined by the order of the tags. From Translate to Rotate to Lessen to fadeOut. More perfect, but pay attention to the animation of the execution order and tag structure order should be consistent! important
- Needless to say, animation is reusable.
- The structure is clear
- Complex animations cause the DOM structure to be too deep
####PS: when using tag flow, place the attribute on the outermost tag if the element is absolutely positioned
Box-sizing: border-box! Important; word-wrap: break-word! Important;”
3. The keyframes flow
Complex animation this kind of animation basically does not need to reuse
@-webkit-keyframes kfc-ani { 0% { -webkit-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); } 33.33333% {-webkit-transform: translate(200px) rotate(0deg) scale(1); transform: translate(200px) rotate(0deg) scale(1); -moz-transform: translate(200px) rotate(0deg) scale(1); -ms-transform: translate(200px) rotate(0deg) scale(1); } 66.66667% {-webkit-transform: translate(200px) Rotate (360deg) scale(1); transform: translate(200px) rotate(360deg) scale(1); -moz-transform: translate(200px) rotate(360deg) scale(1); -ms-transform: translate(200px) rotate(360deg) scale(1); {-webkit-transform: translate(200px) rotate(360deg) scale(0.5); The transform: translate (200 px) rotate (360 deg) scale (0.5); Moz - transform: translate (200 px) rotate (360 deg) scale (0.5); - ms - transform: translate (200 px) rotate (360 deg) scale (0.5); }}
Whether this code is sour enough, the above is generated by CSS preprocessing tools. With Sass we can use this trump card as much as we want.
Sass to perform
$keys : (name : transform,value : translate(0px) rotate(0deg) scale(1),dur : 0s), (name : transform,value : translate(200px) rotate(0deg) scale(1),dur : 1s), (name : transform,value : translate(200px) rotate(360deg) scale(1),dur : 1s), (name : transform,value : Translate (200px) Rotate (360deg) scale(0.5),dur: 1s); .kfc-ani{ -webkit-animation : kfc-ani 4s ease 0s both; } @include kfc($keys,kfc-ani);
The KeyFrames flow is great for complex animations, which are not reusable and are rough enough to write
- Complex animation Trump card
- The ultimate means of
- Reuse difference one-time frames
The trump card of complex animation
The three schools have their own strengths, so we need to use them flexibly in practical projects.
- Use tag streams to complete reusable animations
- For single complex animations, select ace KeyFrames
- Proper use of comma streams also works wonders
Actual project cases
Cicada is a K12 light social product http://imzhiliao.com
Source git
https://github.com/sherlock221/AnimationMultiple