0

I wanna create titles for a menu bar (that discribe what that syble means in the menu). So once the use hover the menu, I want to display the titles with smooth animation and keep then until the user hover the menu. It's posible to do with Java Script but I'm finding a way to do that only with CSS. couse I think it's so efficient.

classes of the menu bar

index.html

<div class="menu-bar-holder">
        <div class="sub-menu-bar">
            <div class="menu-item" onclick="window.location.href='../'">
                <img src="../images/logo-hero.png" alt="">
            </div>
            <!--
            <div class="menu-item go-top-menu" onclick="topFunction()" id="">
                <img src="../images/svg/extension-puzzle-outline.svg" alt="">
            </div>-->
            <div class="menu-item">
                <img src="../images/svg/apps-outline.svg" alt="">
            </div>
            <hr width="100%" color="black">
            <div class="menu-item">
                <img src="../images/svg/cart-outline.svg" alt="">
            </div>
            <div class="menu-item">
                <img src="../images/svg/log-in-outline.svg" alt="">
            </div>
        </div>
        <div class="sub-menu-bar-item-names">
            <div class="menu-item">Home page</div>
            <!--<div class="menu-item go-top-menu" id="">go to the top</div>-->
            <div class="menu-item">catogories</div>
            <hr width="0" color="white" style="opacity: 0; visibility: hidden;">
            <div class="menu-item">cart</div>
            <div class="menu-item">log-in</div>
        </div>
    </div>

style.css

.sub-menu-bar-item-names .menu-item{
    width: fit-content;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff66;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    backdrop-filter: blur(20px);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition-duration: 1s;
    transform: translateX(-300px);
    opacity: 0;
    transition-delay: 0.1s;
    visibility: hidden;
    z-index: 0;
    display: none;
}

@keyframes fadeIn {
    from {
         opacity: 0;
    }

    to {
         opacity: 1;
         visibility: visible;
         transform: translateX(0px);
         -webkit-animation-play-state:paused;
         -moz-animation-play-state:paused;
         -o-animation-play-state:paused;
         animation-play-state:paused;
         cursor: pointer;
    }
}

/*https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered*/
body:has(.sub-menu-bar .menu-item:hover) .sub-menu-bar-item-names .menu-item {
    display: flex;
    animation: fadeIn 1s;
  }

I wanna pause the fadeIn animation, when once it played, until the .sub-menu-bar .menu-item:hover

KargWare
  • 1,746
  • 3
  • 22
  • 35
kavindu udhara
  • 70
  • 6

1 Answers1

0

Not 100% clear on what you're trying to achieve but it sounds like animation-iteration-count might be what you're looking for. You can set the iteration count to 1 so it'll only play once on each hover trigger.

Levidps
  • 485
  • 5
  • 8
  • I'm sorry. It isn't working. I needn't paly it once. The thing I wanted is after the animation reaches(when hover the sub-menu-bar) to the end it wanna pause. and wanna go back to the normal form when he get off the mouse from sub-menu-bar – kavindu udhara Jan 09 '23 at 06:24