Ciao a tutti,
sto facendo moltissime prove ma proprio non riesco ad avviare/fermare un'animazione CSS.
Ho un esempio che funziona ma che utilizza un link come oggetto scatenante la funzione CSS.
Ho bisogno di farlo tramite un asp.net button
Ecco l'esempio funzionante:
codice HTML:< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>I Love CSS</title><style type="text/css"> @-webkit-keyframes MoveRight { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(500px); } } .moveRightAnimation { -webkit-animation-name: MoveRight; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s; position:absolute; }</style> <script type="text/javascript"> function toggleAnimation(what) { // 'what' is the ID of the element that has the animation class applied to it if(what != null && document.getElementById(what) != null) { var elem = document.getElementById(what); if(elem.style.webkitAnimationPlayState == 'paused') elem.style.webkitAnimationPlayState = 'running'; else elem.style.webkitAnimationPlayState = 'paused'; } }</script></head> <body> <div id="iLikeToMoveIt" class="moveRightAnimation">I Like to Move It Move It...</div> <p> <a href="javascript:toggleAnimation('iLikeToMoveIt');">Toggle Animation</a> </p></body></html>
Rispondi quotando
