Autor |
Nachricht |
Mayer10Mail
Threadersteller
Dabei seit: 13.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 13.11.2013 10:33
Titel CSS Animation korrekt steuern |
|
|
Hallo,
möchte mit javascript eine CSS Animation pausieren und wieder abspielen,
das klappt auch soweit, nur habe ich noch das Problem, das ich beim ersten mal 2x klicken muss,
das es pausiert! Was ich persönlich nicht so toll finde!
Gibt es da eine Möglichkeit, das zu ändern?
MfG
Code: | <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:1s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state: running;
}
@keyframes myfirst
{
0% {background: green; left:0px; top:0px;}
100% {background: green; left:80px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: green; left:0px; top:0px;}
100% {background: green; left:80px; top:0px;}
}
</style>
<script type="text/javascript">
function move(idname)
{
if(document.getElementById(idname).style.webkitAnimationPlayState == 'running')
{
document.getElementById(idname).style.webkitAnimationPlayState = 'paused';
}
else
{
document.getElementById(idname).style.webkitAnimationPlayState = 'running';
}
}
</script>
</head>
<body>
<a href="javascript:move('test')">click</a>
<div id="test"></div>
</body>
</html> |
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
Mayer10Mail
Threadersteller
Dabei seit: 13.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 13.11.2013 14:46
Titel
|
|
|
Mmmhhh nur leider beantwortet das nicht wirklich meine Frage! Auf den Seiten war ich auch schon und habe mir dadurch meins zusammen gebastelt!
Aber es geht mir darum, wieso ich bei mir 2mal klicken muss, damit er die Animation pausiert!?
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 18.11.2013 18:22
Titel
|
|
|
Du fragst ja ab, ob im style-Attribut des #test-divs running steht. Das ist beim ersten Klick nicht der Fall, das steht bisher ja nur in der CSS Datei. Daher sind initial die zwei Klicks nötig, die bei richtiger Implementierung aber unnötig wären.
|
|
|
|
|
|
|
|
Ähnliche Themen |
swf per javascript steuern
MC's zentral in AS3 steuern
Movieclips steuern
Zähler aus MC steuern
onMouseWheel MC steuern
flash film steuern
|
|