Every CSS3 animation produced has condensed the crystallization of the wisdom of designers and creators, so that we should pay tribute to the predecessors; The appearance of animation adds activity to the monotonous web page, and the simple display page becomes no longer so boring. Therefore, as a web front-end developer, I feel very happy to create my own unique animation.
Today, I introduce to you the implementation of CSS drop-down menu animation of different methods, I hope to give you help and inspiration. First of all, let’s have a look at the effect:
Then I will introduce the composition of this animation, it mainly consists of three small animation composition. The first part is the mouse slide gradient animation; The second part is the animation of the triangle arrow on the right. This is also easy to say. This triangle is formed by using CSS styles to control the color of the four edges of the element and the shading of each edge. The third part is the expanded drop-down box.
According to the classification of the combination forms of animation in the article “The Mixed Use of Transform, Transition and Animation — Advanced” I wrote before, the realization of animation is classified into the combination of transform and transition and the combination of transform and animation. Combined with the trigger form of animation, the common mouse slide, mouse click on the PC side, and the touch form on the WAP side, the final presentation form of the animation will be the following four common forms: One, we’re going to do it using transition two, we’re going to do it using animation three, we’re going to do it using transition and four, we’re going to do it using animation
I will explain the implementation of the first two kinds in detail, the implementation of the last two kinds (briefly), because it is the change of trigger way, so the students who have certain experience in using javascript will be easy to form their own code according to their own habits, and then form their own CSS animation drop-down menu solution.
Mouse over – pull down menu animation
Transition and transform
<div class=" L-drop-menu L-menu-1 ">< span> dropdown menu </span> <ul class=" L-list ">< li class=" L-list-item "><a A href = "http://www.baidu.com" > baidu < / a > < / li > < li class = "l - list - item" > < a href = "http://www.bing.com" > bing search < / a > < / li > < li class="l-list-item"><a href="http://www.iconfont.cn/">iconfont</a></li> </ul> </div>Copy the codeThe CSS code:
.l-list { position: absolute; top: 100%; z-index: -1; width: 100%; padding: 4px 0; background-color: #fff; border: 1px solid #cecece; box-sizing: border-box; opacity: 0; } .l-list-item { list-style: none; padding: 4px 8px; } .l-list-item a { display: block; padding: 4px 0; font-size: 16px; color: #000; text-align: center; text-decoration: none; The transition: all 0.2 s linear; } .l-list-item a:hover { color: #fff; background-color: #cecece; } .l-drop-menu { position: relative; width: 142px; height: auto; margin: 0 auto; } .l-drop-menu>span { position: relative; display: block; padding: 8px 20px; text-align: center; color: #58a; background-color: #fff; cursor: pointer; } .l-drop-menu>span::after { position: absolute; top: 8px; right: 16px; content: ''; width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: dashed dashed solid; border-color: transparent transparent #c2c2c2; The transition: all 0.3 s linear; } .l-drop-menu>span:hover { color: #fff; background-color: #cecece; } .l-drop-menu>span:hover::after { top: 16px; border-style: solid dashed dashed; border-color: #ffffff transparent transparent; }Copy the codeThe above is common code for two different implementations of animation and Transition.
Transiton implementation form of the code
.l-menu- 1 .l-list {
transform: translate3d(0.10px, 0);
backface-visibility: hidden;
transition: all 0.3s linear;
}
.l-menu- 1:hover .l-list {
z-index: 2;
overflow: auto;
opacity: 1;
transform: translate3d(0.0.0);
}Copy the codeAnimation implementation form of CSS code
.l-menu2 - .l-list{
animation: l-animation-up 0.5s;
}
.l-menu2 -:hover .l-list{
z-index: 2;
opacity: 1;
animation: l-animation-down 0.5s;
}
@-webkit-keyframes l-animation-down {
from {
-webkit-transform: translate3d(0.10px, 0);
opacity: 1.
}
to {
-webkit-transform: translate3d(0.0.0);
opacity: 1
}
}
@keyframes l-animation-down {
from {
transform: translate3d(0.10px, 0);
opacity: 1.
}
to {
transform: translate3d(0.0.0);
opacity: 1
}
}
@-webkit-keyframes l-animation-up {
from {
-webkit-transform: translate3d(0.0.0);
opacity: 1
}
to {
-webkit-transform: translate3d(0.10px, 0);
opacity: 1.
}
}
@keyframes l-animation-up {
from {
transform: translate3d(0.0.0);
opacity: 1
}
to {
transform: translate3d(0.10px, 0);
opacity: 1.}}Copy the codeThe code is finished, let’s talk about the attention point of doing this animation!
1. The first one is in the form of transition and transform. The usual implementation form of the drop-down box is realized by positioning. 2. The first one is in the form of transition and transform. Our traditional controls are display: None, display: block. However, it is obviously not suitable for this solution. The result of using this solution is that there is no transition effect, that is, no animation effect. I use opacity and z-index to solve this problem (view and analyze the code for details). 3. The second one uses the form of animation and transform, which I believe you have seen in your study and work. But the animation effect to be realized in this form is better than that in the first one, because the second one only has the transition effect when it is opened, but not when it is closed. For students with low requirements, maybe this effect is not bad, but for geeks like me, I am still not satisfied, so I tried to add a moving animation to achieve the same animation effect as the first one (there is a page refresh problem). However, I would like to go on to say that in the second point, I mentioned that opacity and z-index are used to solve the problem of transition animation without transition. In the second form, display: None and display: block can also be used to control opacity and opacity.
To sum up, the first drop-down menu animation is the best choice, and the second one is the best choice.
Demo address: lvzhenbang. Making. IO/CSS 3 – animat…
Click — pull down menu animation
The difference between a click and a mouse slide is that it triggers a different CSS code, and the transition from a click is a change that adds. L-menu-active to the element. The animation is implemented by clicking on the element by adding. L-menu-in,. L-menu-out.
HTML code as above
Common CSS code overlaps with the previous two examples:
.l-list { position: absolute; top: 100%; display: none; width: 100%; background-color: #fff; box-sizing: border-box; } .l-list-item { list-style: none; padding: 4px 8px; border-top: 1px solid #cecece; } .l-list-item a { display: block; padding: 4px 0; font-size: 16px; color: #000; text-align: center; text-decoration: none; - its - the transition: all 0.2 s linear; } .l-list-item a:hover { color: #fff; background-color: #cecece; } .l-drop-menu { position: relative; width: 142px; height: auto; margin: 0 auto; } .l-drop-menu>span { position: relative; display: block; padding: 10px 20px; text-align: center; color: #58a; background-color: #fff; cursor: pointer; } .l-drop-menu>span::after { position: absolute; top: 16px; right: 16px; content: ''; width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: solid dashed dashed; border-color: #58a transparent transparent; - its - the transition: all 0.3 s linear; The transition: all 0.3 s linear; }Copy the codeTransition transition
.l-drop-menu.l-menu-active>span, .l-drop-menu.l-menu-in>span { color: #fff; background-color: #cecece; } .l-drop-menu.l-menu-active>span::after, .l-drop-menu.l-menu-in>span::after { top: 8px; border-style: dashed dashed solid; border-color: transparent transparent #58a; } .l-menu-1.l-menu-active .l-list { display: block; -webki-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .l-menu-1 .l-list { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); - its - the transition: all 0.3 s linear; The transition: all 0.3 s linear; }Copy the codeAnimation code:
.l-menu- 2.l-menu-out .l-list {
display: none;
-webkit-animation: l-animation-up 0.5s;
animation: l-animation-up 0.5s;
}
.l-menu- 2.l-menu-in .l-list {
display: block;
-webkit-animation: l-animation-down 0.5s;
animation: l-animation-down 0.5s;
}
@-webkit-keyframes l-animation-down {
from {
-webkit-transform: translate3d(0.10px, 0);
}
to {
-webkit-transform: translate3d(0.0.0);
}
}
@keyframes l-animation-down {
from {
transform: translate3d(0.10px, 0);
}
to {
transform: translate3d(0.0.0);
}
}
@-webkit-keyframes l-animation-up {
from {
-webkit-transform: translate3d(0.0.0);
}
to {
-webkit-transform: translate3d(0.10px, 0);
}
}
@keyframes l-animation-up {
from {
transform: translate3d(0.0.0);
}
to {
transform: translate3d(0.10px, 0); }}Copy the codeSo in summary, you can see that transition is animated, and when you click it’s animated with display: None, display: block; This approach still fails to achieve the desired effect, so the scheme of opacity and Z-index should still be adopted. There are no problems with animation testing, and no problems when you refresh the web page.
Therefore, both of these schemes are good when you click to realize the drop-down menu, but the form of animation is relatively simple to understand.
As for how to change the transition one-click implementation, you can use it as a small example.
Transition js code:
var menu1 = document.getElementsByClassName('l-menu-1') [0];
menu1.onclick = function() {
var className = menu1.className;
if (~className.indexOf('l-menu-active')) {
menu1.className = className.replace(' l-menu-active'.' ');
} else {
menu1.className += ' l-menu-active'; }}Copy the codeAnimation js code:
var menu2 = document.getElementsByClassName('l-menu-2') [0];
menu2.onclick = function() {
var className = menu2.className;
if (~className.indexOf('l-menu-in')) {
menu2.className = className.replace('l-menu-in'.'l-menu-out');
} else {
menu2.className += ' l-menu-in'; }}Copy the codeDemo address: lvzhenbang. Making. IO/CSS 3 – animat…
In the next article I will bring you some of my own CSS animations
The source code download address: making address: https://github.com/lvzhenbang/css3-animate/tree/gh-pages