Button Effekt

Kaspar_ · 5 August 2014

Hey jetzt hab ich nochmal ein Problem damit...

Ich hab einfach bisschen rumprobiert und wollte Pinky den kleinen Geist unter ein paar Balken durchsausen lassen, die ihre Farbe ändern. Ich denke mein Problem liegt an der Reihenfolge des Codes, was für mich aber wenig Sinn macht. Ich habe dazu nichts gefunden und hoffe ihr könnt mir helfen...

Also Pinky soll unten den Balken hin und her flitzen, die Balken verändern schön ihre Farbe wie sie es sollen, nur Pinky zickt mal wieder rum :(

Hier mein vollständiger Code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
  

    #Boxen {
      
        float: left;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        animation-name: boxen;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
          
        -webkit-animation-name: boxen;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
          
                      
            }
          
          
  
    @keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}
  
        }
          
  
    @-webkit-keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}
  
        }
      
  
  
    #nofloat {
  
    clear: left;
    }
      
  
  
  
    #Pinky {


    position: absolute;
    animation-name: move;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
  
    -webkit-animation-name: move;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;

  
div#Pinky:hover {

    animation-play-state: paused;
  
    -webkit-animation-play-state: paused;
  
    }

  
    @keyframes move {

    from {left: 0px;}
    to {right: 1000px;}
  
    }

  
@-webkit-keyframes move {

    from {left: 0px;}
    to {right: 1000px;}
  
    }
  
 
    </style>
  
</head>

<body>


    <div id="Boxen"></div>
    <div id="Boxen"></div>
    <div id="Boxen"></div>
    <div id="Boxen"></div>
  
    <div id="nofloat"</div>
  
    <div><img id="Pinky" src="Pinky.png" alt="Pinky der Geist"/></div>


</body>
</html>

Im Anhang ein kleines Bild wie es ausehen soll.

Tronjer · 5 August 2014

Schau dir mal dein HTML an, was fällt da auf?

Kaspar_ · 6 August 2014

Um ehrlich zu sein gar nichts.
Die Boxen funktionieren, daran kann es also nicht liegen, der nofloat arbeitet auch und Pinke sehe ich auch, nur macht er nicht was er soll. Dachte eher es liegt an den keyframes weil sehen tu ich alles aber machen tut es nix.
Habe mir nun aber mein HTML nochmal angeschaut und rumversucht aber habe nichts gefunden.

Bzw ich habe gesehen dass nofloat ned geschlossen ist aber gebracht hat es nichts ;)

Kaspar_ · 7 August 2014

Kann mir niemand sagen was da faul ist? Ich finde den Fehler einfach nicht...

B3nnoX · 7 August 2014

Das einzige was mir auffällt ist das du ID öfter vergibst, aber eine ID darf nur einmalig sein. anstelle von ID müsstest du class nehmen

EDIT:
<div id="nofloat"></div>

da fehlt dir die schließende klammer.

Ich kenn mich damit echt null aus, hab auch gerade mal etwas rumgespielt. Damit bewegt sich das Bild jedenfalls.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>


    .Boxen {
     
        float: left;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        animation-name: boxen;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
         
        -webkit-animation-name: boxen;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
         
                     
            }
         
         

    @keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}

        }
         

    @-webkit-keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}

        }
     


    #nofloat {

    clear: left;
    }
     



    #Pinky {
    position: absolute;
   
    animation-name: move;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;

    -webkit-animation-name: move;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    }

    img#Pinky:hover {

    animation-play-state: paused;

    -webkit-animation-play-state: paused;

    }


    @keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}


    @-webkit-keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}
   


    </style>

</head>

<body>


    <div class="Boxen"></div>
    <div class="Boxen"></div>
    <div class="Boxen"></div>
    <div class="Boxen"></div>

    <div id="nofloat"></div>

    <div><img id="Pinky" src="Pinky.png" alt="Pinky der Geist"/></div>


</body>
</html>

Kaspar_ · 7 August 2014

Danke für deine Hilfe erstmal :)

Also dein Code hat bei mir nicht funktioniert, habs auf nem Mac mit Safari versucht und es ging nicht. Aber habe es dann auf Chrome versucht und da passt alles wunderbar. Das verstehe ich eigentlich nicht.

Jedenfalls hab ich auch nochmal rumprobiert und es lag bei mir tatsächlich an der Reihenfolge des Codes und daran, dass ich ein div bei #pinky:hoher gesetzt hatte, damit geht es nicht... img#pinky und img#pinky:hover gehen also, ein div anstatt img geht nicht. Man kann auch beides weglassen das funktioniert dann auch...

Also dieser Code geht bei mir nur auf Chrome, nicht auf Safari:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
    .Boxen {

        float: left;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        animation-name: boxen;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
    
        -webkit-animation-name: boxen;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
    
                
            }
    
    
    @keyframes boxen {
        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}
        }
    
    @-webkit-keyframes boxen {
        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}
        }

    #nofloat {
    clear: left;
    }

    #Pinky {
    position: absolute;

    animation-name: move;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-animation-name: move;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    }
    img#Pinky:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    }
    @keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}
    @-webkit-keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}

    </style>
</head>
<body>
    <div class="Boxen"></div>
    <div class="Boxen"></div>
    <div class="Boxen"></div>
    <div class="Boxen"></div>
    <div id="nofloat"></div>
    <div><img id="Pinky" src="Pinky.png" alt="Pinky der Geist"/></div>
</body>
</html>

Und der funktioniert bei beiden:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>


    #Boxen {
   
        float: left;
        height: 50px;
        width: 200px;
        border-radius: 10px;
        animation-name: boxen;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
       
        -webkit-animation-name: boxen;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
       
                   
            }
       
       

    @keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}

        }
       

    @-webkit-keyframes boxen {

        from {background-color: red;}
        66% {background-color: blue;}
        to {background-color: yellow;}

        }
   


    #nofloat {

    clear: left;
    }

   
    @keyframes move {

    from {left: 0px;}
    to {right: 1000px;}

    }


@-webkit-keyframes move {

    from {left: 0px;}
    to {right: 1000px;}

    }




    #Pinky {


    position: absolute;
    animation-name: move;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;

    -webkit-animation-name: move;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;


   



#Pinky:hover {

    animation-play-state: paused;

    -webkit-animation-play-state: paused;

    }






    </style>

</head>

<body>


    <div id="Boxen"></div>
    <div id="Boxen"></div>
    <div id="Boxen"></div>
    <div id="Boxen"></div>

    <div id="nofloat"></div>

    <div><img id="Pinky" src="Pinky.png" alt="Pinky der Geist"/></div>


</body>
</html>

Die Keyframes müssen bei mir vor #Pinky stehen, damit er sich bewegt...

Safari kann mit

Code:

     @keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}
    @-webkit-keyframes move {
    0%  { transform: translateX(-200px)}
    30% { transform: translateX(220px)}
    65% { transform: translateX(580px)}
    100% { transform: translateX(900px)}
}

überhaupt nichts anfangen bei mir, Chrome wiederum schon... ist das normal? In diesem Fall ist es egal wo die keyframes stehen, Pinky macht keine Bewegung.

thecain · 7 August 2014

Eine ID mehrfach zu vergeben ist einfach falsch.

Kaspar_ · 7 August 2014

Ja ihr habt recht, habe die IDs durch Klassen ersetzt...
War ein Anfängerfehler von mir, ich bitte um Verzeihung

Button Effekt

Kaspar_

Mitglied

Tronjer

Senior HTML'ler

Kaspar_

Mitglied

Kaspar_

Mitglied

B3nnoX

Aktives Mitglied

Kaspar_

Mitglied

thecain

Aktives Mitglied

Kaspar_

Mitglied

Neueste Beiträge