mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 25.03.2019 02:10 Benutzername: Passwort: Auto-Login

Thema: CSS Animation korrekt steuern vom 13.11.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Animation korrekt steuern
Autor Nachricht
Mayer10Mail
Threadersteller

Dabei seit: 13.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 13.11.2013 10:33
Titel

CSS Animation korrekt steuern

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 30
Geschlecht: Männlich
Verfasst Mi 13.11.2013 10:53
Titel

Antworten mit Zitat Zum Seitenanfang

Das war schwer * Ööhm... ja? *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Mayer10Mail
Threadersteller

Dabei seit: 13.09.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 13.11.2013 14:46
Titel

Antworten mit Zitat Zum Seitenanfang

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!?
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 18.11.2013 18:22
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [HTML-CSS] Grafik wird nicht korrekt gekachelt
CSS basiertes Layout wird nicht korrekt dargestellt
CSS animation-delay
CSS-Animation ohne Javascript
CSS Animation: translate3d / translate
GOLIVE CSS-Animation DHTML-Zeitachse auf Monitor zentrieren?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.