[英]Css hover animation flickering/looping
I have a question about an animation.我有一个关于 animation 的问题。
My animation is flickering, I want to stop that trigger looping.我的 animation 闪烁,我想停止触发循环。 When I hover these after and before it's like looping my animation.当我在 hover 之后和之前进行这些操作时,就像循环我的 animation 一样。 I've tried little things but no clue...我尝试了一些小事情,但没有任何线索......
Maybe should i try to do it with span (replace before) with position absolute?也许我应该尝试用 span(之前替换)和 position absolute 来做?
Here is the codepen: https://codepen.io/chrishanZ/pen/eYgoLBG这是代码笔: https://codepen.io/chrishanZ/pen/eYgoLBG
Thanks for helping me.谢谢你帮助我。
.header { position: fixed; left: 0; right: 0; top: 0; background-color: blue; z-index: 4; }.header_buttonburger { position: absolute; color: black; text-transform: uppercase; font-size: 1.125em; right: 19px; top: 24px; z-index: 3; }.header_buttonburger:before, .header_buttonburger:after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background-color: black; transition: top 0.15s ease; pointer-events: auto; }.header_buttonburger:before { top: calc(100% + 2px); }.header_buttonburger:after { top: calc(100% + 8px); }.header_buttonburger:hover:before { top: calc(100% + 4px); }.header_buttonburger:hover:after { top: calc(100% + 12px); }
<header class="header"> <button class="header_buttonburger"> Menu </button> </header>
If someone can help me: :)如果有人可以帮助我::)
Thanks a lot非常感谢
you need to create a container for the button and hover on the container like this:您需要在容器上为按钮和 hover 创建一个容器,如下所示:
<div class="container_header_buttonburger">
<button class="header_buttonburger">
Menu
</button>
</div>
and for the styles对于 styles
.header_buttonburger {
position: relative;
color: black;
text-transform: uppercase;
font-size: 1.125em;
z-index: 3;
display: block;
}
.container_header_buttonburger {
position: absolute;
right: 19px;
top: 24px;
padding-bottom:14px; /* <--that makes the difference */
}
.container_header_buttonburger:hover > .header_buttonburger:before {
top: calc(100% + 4px);
}
.container_header_buttonburger:hover > .header_buttonburger:after {
top: calc(100% + 12px);
}
so all the styles:所以所有的styles:
.header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: blue;
z-index: 4;
}
.header_buttonburger {
position: relative;
color: black;
text-transform: uppercase;
font-size: 1.125em;
z-index: 3;
display: block;
}
.header_buttonburger:before, .header_buttonburger:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: black;
transition: top 0.15s ease;
pointer-events: auto;
}
.header_buttonburger:before {
top: calc(100% + 2px);
}
.header_buttonburger:after {
top: calc(100% + 8px);
}
.container_header_buttonburger {
position: absolute;
right: 19px;
top: 24px;
padding-bottom:14px; /* <--that makes the difference */
}
.container_header_buttonburger:hover > .header_buttonburger:before {
top: calc(100% + 4px);
}
.container_header_buttonburger:hover > .header_buttonburger:after {
top: calc(100% + 12px);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.