locked
html5 animation with circlebounce effect RRS feed

  • Question

  • User-418973555 posted

    trying to use a span circle to create a slight bouncing effect but no effective,,

        <script type="text/javascript">
           $(document).ready(function(){
    $('button').click(function(e){
      
      $('#circle').addClass("circleUp");
      });
    });
    
        </script>
    
        <style type="text/css">
            .circle:before {
                content: ' \25CF';
                font-size: 200px;
            }
      .circleUp{
            ;
            animation-name:circlebounce;
            animation-duration: 3s;
          
    }
    
    
      /*
      animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-name: buttonTransition;
        transform-origin: center center;
    
          */
      
    }
            @keyframes circlebounce {
                0%, 100% {
                    transform: scale(0.0);
                    
                }
                50% {
                    transform: scale(2.0);
                   
                    background-color: #ec407a; 
                }
            }
          
    
        </style>
       
        <div class="row">
            <div>
                <div style=";left:70px">
                    <asp:Image ID="img01" ImageUrl="~/images/anchor.jpg" runat="server" Height="50px" Width="50px" />
                </div>
                <div style="; top:250px">
                     <span id="circle" class="circle"></span>
                </div>
               
            </div>
            <div style="padding-top:50px">
            <input type="button" id="button" value="Click Me"></input>
            </div>
        </div>

    Thursday, August 30, 2018 5:10 AM

Answers

  • User839733648 posted

    Hi  larnvok09,

    I suggest that you could use .one() to listen to when the animation ends, then remove the class 'boucne'.

    For more details, you may refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var animationEvent = 'webkitAnimationEnd animationend';
                $('#btnShow').click(function (e) {
                    $('#circle').toggleClass("bounce");
                    $('#circle').one(animationEvent, function (event) {
                        $('#circle').removeClass('bounce')
                    });
                });
            });
    
        </script>
    
        <style type="text/css">
            div span {
                ;
                top: 20px;
                display: inline-block;
            }
    
            .bounce {
                -webkit-animation: bounce .3s ease alternate forwards;
                animation: bounce .3s ease alternate forwards;
            }
    
            #circle {
                margin-left: 20px;
                margin-bottom: 50px;
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
            }
    
    
            @-webkit-keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
    
            @keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
        </style>
    
    </head>
    <body>
        <div>
            <span id="circle" class=""></span>
            <br />
            <br />
            <input type="button" id="btnShow" value="Click Me" />
        </div>
    </body>
    </html>
    
    

    result:

    Best Regards,
    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 4, 2018 2:05 AM

All replies

  • User839733648 posted

    Hi  larnvok09,

    According to your description and codes, I suggest that you could modify some parts of the CSS styles to let it work.

    To create a circle , you may refer to: https://www.w3schools.com/howto/howto_css_circles.asp 

    To add CSS animation to span ,you may refer to: http://css3transition.com/bouncing-text-animation-using-only-css/ 

    I’ve made a sample on my side, and for more details, you could refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnShow').click(function (e) {
                    $('#circle').addClass("bounce");
                });
            });
        </script>
    
        <style type="text/css">
            div span {
                ;
                top: 20px;
                display: inline-block;
            }
    
            .bounce {
                -webkit-animation: bounce .3s ease infinite alternate;
                animation: bounce .3s ease infinite alternate;
            }
    
            #circle {
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
            }
    
            @-webkit-keyframes bounce {
                100% {
                    top: -20px;
                }
            }
    
            @keyframes bounce {
                100% {
                    top: -20px;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <span id="circle" class=""></span>
            <br />
            <br />
            <input type="button" id="btnShow" value="Click Me" />
        </div>
    
    </body>
    </html>
    

    Result:

    Best Regards,
    Jenifer

    Friday, August 31, 2018 9:07 AM
  • User-418973555 posted

    is there a way to get animation like scale out scale in, means the circle becomes bigger abit then back to its normal size by just 1 time , not infinite,

    right after trying this way, it scale out and in 1s but just only one time click on the button, the second and after 3rd click not workable,

       <!DOCTYPE html>
    
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnShow').click(function (e) {
                    $('#circle').addClass("bounce");
                });
            });
        </script>
    
        <style type="text/css">
            div span {
                ;
                top: 20px;
                display: inline-block;
            }
    
            .bounce {
           
                animation-duration: .1s;
                animation-name: bounce;
                animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
            }
    
            #circle {
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
            }
    
            @keyframes bounce {
                        from {
                          opacity: 1;
                          transform: scale(.9, .9);
                        }
                    to {
                          opacity: 1;
                          transform: scale(1.2, 1.2);
                       }
                    }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div style=";left:35px">
                    <asp:Image ID="img01" ImageUrl="~/images/anchor.jpg" runat="server" Height="50px" Width="50px" />
                </div>
                <div style="; top:400px;left:400px">
                     <span id="circle" class=""></span>
                </div>
               
            </div>
            <div style="padding-top:50px">
            <input type="button" id="btnShow" value="Click Me"></input>
            </div>
        </div>
    
    </body>
    </html>

    Friday, August 31, 2018 2:46 PM
  • User839733648 posted

    Hi larnvok09 ,

    I’ve modified the effect of circle bounce according to your requirement.

    To let animation run only once, you could just set the .animation as forwards.

    For more infomation, you may refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnShow').click(function (e) {
                    $('#circle').addClass("bounce");
                });
            });
        </script>
    
        <style type="text/css">
            div span {
                ;
                top: 20px;
                display: inline-block;
            }
    
            .bounce {
                -webkit-animation: bounce .3s ease alternate forwards;
                animation: bounce .3s ease alternate forwards;
            }
    
            #circle {
                margin-left: 20px;
                margin-bottom: 50px;
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
            }
    
    
            @-webkit-keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
    
            @keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
        </style>
    
    </head>
    <body>
        <div>
            <span id="circle" class=""></span>
            <br />
            <br />
            <input type="button" id="btnShow" value="Click Me" />
        </div>
    
    </body>
    </html>

    result:

    Best Regards,
    Jenifer

    Monday, September 3, 2018 1:58 AM
  • User-418973555 posted

    both code are workable, it scale out and in 1s but just only one time click on the button, the second and after 3rd click not workable,

    Monday, September 3, 2018 2:20 AM
  • User-418973555 posted

    added,

     $('#circle').toggleClass("bounce");

    seems like it works on first click, not second click, then it works on 3rd click, then 4th clicks not working...etc.

    Monday, September 3, 2018 9:19 AM
  • User839733648 posted

    Hi  larnvok09,

    I suggest that you could use .one() to listen to when the animation ends, then remove the class 'boucne'.

    For more details, you may refer to the code below.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var animationEvent = 'webkitAnimationEnd animationend';
                $('#btnShow').click(function (e) {
                    $('#circle').toggleClass("bounce");
                    $('#circle').one(animationEvent, function (event) {
                        $('#circle').removeClass('bounce')
                    });
                });
            });
    
        </script>
    
        <style type="text/css">
            div span {
                ;
                top: 20px;
                display: inline-block;
            }
    
            .bounce {
                -webkit-animation: bounce .3s ease alternate forwards;
                animation: bounce .3s ease alternate forwards;
            }
    
            #circle {
                margin-left: 20px;
                margin-bottom: 50px;
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
            }
    
    
            @-webkit-keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
    
            @keyframes bounce {
                0% {
                    transform: scale(1.0);
                }
    
                50% {
                    transform: scale(2.0);
                }
    
                100% {
                    transform: scale(1.0);
                }
            }
        </style>
    
    </head>
    <body>
        <div>
            <span id="circle" class=""></span>
            <br />
            <br />
            <input type="button" id="btnShow" value="Click Me" />
        </div>
    </body>
    </html>
    
    

    result:

    Best Regards,
    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 4, 2018 2:05 AM
  • User-418973555 posted

    seems like added 'return true' after toggleclass works, but the scaling to 3 just not scale to 3, it looks like sometimes it may appear but sometimes it doesnt, most of the time it just scale to 1.1 and back to normal,

     $(document).ready(function () {
    
                $('#<%= btnShow.ClientID %>').click(function (e) {
                    $('#circle').toggleClass("bounce");
                    return true;
                });
            }); 

    .bounce {

    animation-duration: 2s;
    animation-name: bounce;


    }

    @keyframes bounce {
    from {
    opacity: 1;
    transform: scale(.9, .9);
    }
    to {
    opacity: 1;
    transform: scale(3, 3);
    }
    }

    i tried yer code , but dunno why it couldnt work on here

    Tuesday, September 4, 2018 4:33 AM
  • User-418973555 posted

    it works somehow but needed the 'return false' , without it it just came back unchanged,

       $(document).ready(function () {
    
                var clicks = 0; 
                
                $('#<%= btnShow.ClientID %>').click(function (e) {
                     var animationEvent = 'webkitAnimationEnd animationend';
                    $('#circle').toggleClass("bounce");
                    $('#circle').one(animationEvent, function (event) {
                        $('#circle').removeClass('bounce')
                    });
                    clicks += 1;
                    document.getElementById("clicks").innerHTML = clicks;
                   
                      return false;
    
                });
            }); 

    Tuesday, September 4, 2018 7:23 AM