locked
html5 hover on div to show animation RRS feed

  • Question

  • User-418973555 posted

    try to develop a hover effect on div and show animation expand/scale-out right 40% from original but not quite

            .menuslider {
             
                ;
    	    height:100%;
                width: 5%;
                background-color:#a51013;
                 animation: scale-in-right2 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                 animation-play-state: paused; 
            }
    
            .menuslider:hover {
    	                
    	               
                 animation-play-state: running;
            }
    
            @keyframes scale-in-right2 {
                  0% {
                      -webkit-transform: scaleX(0);
                            transform: scaleX(0);
                            -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                            opacity: 1;
                  }
                  100% {
                      -webkit-transform: scaleX(1);
                            transform: scaleX(1);
                            -webkit-transform-origin: 0% 0%;
                            transform-origin: 40% 0%;
                            opacity: 1;
                  }
                }

    <div id="sidemenu"></div>
    <div class="menuslider">menu slider </div>
    <div id="menutitle" class="menutitle">Menu</div>
    <div id="main">

    Friday, May 24, 2019 7:17 AM

Answers

  • User839733648 posted

    Hi larnvok09,

    larnvok09

    but strange is that menuslider1 on hover will always flickering, meaning that the mouse pointer has to point to the far left on the div for sliding animation

    The second you scale it, your mouse is no longer on the div and this causes the bug.

    You could wrap the div in anothor one to solve the issue.

    Also, the style position will affect the behaviour, I suggest that you could set the height as a fixed value.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #menuslider1 {
                float: left;
                left: 0%;
                width: 5%;
                height: 500px;
                background-color: #a51013;
            }
    
            div:hover #menuslider1 {
                animation: scale-in-hor-left 0.5s ease-in both;
            }
    
            @keyframes scale-in-hor-left {
                0% {
                    -webkit-transform: scaleX(0);
                    transform: scaleX(0);
                    -webkit-transform-origin: 0% 0%;
                    transform-origin: 0% 0%;
                    opacity: 1;
                }
    
                100% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(5);
                    -webkit-transform-origin: 0% 0%;
                    transform-origin: 0% 0%;
                    opacity: 1;
                }
            }
        </style>
    
    </head>
    <body>
        <div>
            <div id="menuslider1">
                Menu
            </div>
        </div>
    </body>
    </html>

    result:

    Reference: https://stackoverflow.com/questions/51606456/css-keyframes-animation-keeps-flickering-on-hover

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 27, 2019 7:34 AM

All replies

  • User839733648 posted

    Hi larnvok09,

    According to your description and code, I'm not clear about your requirment.

    I've tried to move the animation to hover class, I'd like to ask if this effect is as your expected?

    Or I make another sample, do you want do someting like this effect?

    My sample code:

    <div id="test-expand">
    test
    </div>
    #test-expand {
      border: 1px solid black;
      text-align: center;
      ;
      width: 200px;
      height: 200px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
    }
    #test-expand:hover {
      width:400px;
      height: 400px;
    }
    

    If possible, please describe your requirement more in details so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Friday, May 24, 2019 9:25 AM
  • User-418973555 posted

    not sure but this could work, purpose is to add an addeventlistener to the animation, to call another animation event

       #menuslider1
            {
              float:left;
              left:0%;
              background-color:#a51013;
              ;
              width: 5%;
              height: 100%;
              
             
             
            }
    
            #menuslider1:hover {
              /*width:30%;
              height: 100%;*/
              animation: scale-in-hor-left 0.5s ease-in both;
              
            }
    
           
    
            @keyframes scale-in-hor-left {
                  0% {
                    -webkit-transform: scaleX(0);
                            transform: scaleX(0);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                  }
                  100% {
                    -webkit-transform: scaleX(1);
                            transform: scaleX(5);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                  }
                }
    
    
    <script>
     var boxThree = document.getElementsByClassName('menuslider1')[0];
                boxThree.addEventListener("animationstart", MenuSlider1AnimationListener, false);
    ...
    
    </script>

    but strange is that menuslider1 on hover will always flickering, meaning that the mouse pointer has to point to the far left on the div for sliding animation

    #menuslider1
            {
              
              left:0%;
              background-color:#a51013;
              ;
              width: 5%;
              height: 100%;
              
            }


     #menuslider1:hover 
            {
              /*width:30%;
              height: 100%;*/
             
              animation: scale-in-hor-left 0.5s ease-in both;
              
            }
    
           
    
            @keyframes scale-in-hor-left {
                  0% {
                    -webkit-transform: scaleX(0);
                            transform: scaleX(0);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                  }
                  100% {
                    -webkit-transform: scaleX(1);
                            transform: scaleX(5);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                  }
                }



    Friday, May 24, 2019 5:16 PM
  • User839733648 posted

    Hi larnvok09,

    larnvok09

    but strange is that menuslider1 on hover will always flickering, meaning that the mouse pointer has to point to the far left on the div for sliding animation

    The second you scale it, your mouse is no longer on the div and this causes the bug.

    You could wrap the div in anothor one to solve the issue.

    Also, the style position will affect the behaviour, I suggest that you could set the height as a fixed value.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #menuslider1 {
                float: left;
                left: 0%;
                width: 5%;
                height: 500px;
                background-color: #a51013;
            }
    
            div:hover #menuslider1 {
                animation: scale-in-hor-left 0.5s ease-in both;
            }
    
            @keyframes scale-in-hor-left {
                0% {
                    -webkit-transform: scaleX(0);
                    transform: scaleX(0);
                    -webkit-transform-origin: 0% 0%;
                    transform-origin: 0% 0%;
                    opacity: 1;
                }
    
                100% {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(5);
                    -webkit-transform-origin: 0% 0%;
                    transform-origin: 0% 0%;
                    opacity: 1;
                }
            }
        </style>
    
    </head>
    <body>
        <div>
            <div id="menuslider1">
                Menu
            </div>
        </div>
    </body>
    </html>

    result:

    Reference: https://stackoverflow.com/questions/51606456/css-keyframes-animation-keeps-flickering-on-hover

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 27, 2019 7:34 AM