javascript - Running CSS keyframes on click -
i'm trying have message appear when button clicked. want have "go!" fade in/out signify start of game when start button clicked. i'm trying javascript @ moment using jquery , library teacher gives combination of on mouse click , on screen tap 'ontap' lter use mobiles.
i have set add animation class when button clicked animation won't play, if add animation class beginning animation plays not when button clicked. went wrong adding javascript , how can achieve basic click button , text fades in/out?
<script type="text/javascript"> $(document).ready(function() { $("#addfrogbut").ontap(function() { $("#gotext").addclass(".goanim"); }); }); </script> <head> #addfrogbut { position: fixed; bottom: 20px; font-family: fantasy; font-size: 32px; left: 20px; text-transform: uppercase; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; padding: 2px 18px; background-color: white; border-radius: 12px; text-align: center; cursor: pointer; } #gotext { position: fixed; bottom: 50vh; left: 42.5vw; color: rgba(43, 96, 162, 0); font-family: fantasy; font-size: 60px; text-transform: uppercase; } .goanim { animation-name: go; animation-duration: 3s; animation-iteration-count: 1; } @keyframes go { 0% { color: rgba(43, 96, 162, 0); } 50% { color: rgba(0, 0, 0, 1); } 100% { color: rgba(43, 96, 162, 0); } } </head> <body> <div id='addfrogbut'>add frog</div> <div id='gotext'>go!</div> </body>
i fixed appending whole div single id rather adding class existing div.
Comments
Post a Comment