• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button Effekt

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.
Pinky_Balken.png
 
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 ;)
 
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>
 
Zuletzt bearbeitet:
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.
 
Zuletzt bearbeitet:
Ja ihr habt recht, habe die IDs durch Klassen ersetzt...
War ein Anfängerfehler von mir, ich bitte um Verzeihung :rolleyes:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben