CSS- animate ruckelt

nadjak

Hallo,

ich habe ein kleine Animation mit einer Keyframe-animation. Die Bewegung soll nur ganz klein sein. Und genau da liegt das Problem. Es fängt das ruckeln an. Hat vielleicht jemand einen Tipp, was ich ändern kann?
Der Link zur Seite lautet: http://playground.lamisch.de/fuxdesign/#news
Es geht um den orangen Newsbereich.

CSS-Code:

Code

#newsfeld{
    background: url(images/Zeichnungen/fleck.png) no-repeat;
    width:249px;
    height: 145px;
}


#newstext{
  -webkit-animation: text 6s infinite;
  -moz-animation: text 6s infinite;
  -o-animation: text 6s infinite;
  animation: text 6s infinite;
}


@-webkit-keyframes text{
  0%{
     width:100%;  
     height:100%;
  }
  10%{
    width:100%;  
     height:100%;   
  }
  50%{
     width: 99%;
     height: 99%;
  }
 
  100%{
    width: 100%;
     height: 100%;  
  }
}
@-moz-keyframes text{
0%{
     width:100%;  
     height:100%;
  }
  10%{
    width:100%;  
     height:100%;   
  }
  50%{
     width: 99%;
     height: 99%;
  }
  100%{
    width: 100%;
     height: 100%;  
  }
}
@-o-keyframes text{
 0%{
     width:100%;  
     height:100%;
  }
  10%{
    width:100%;  
     height:100%;   
  }
  50%{
     width: 99%;
     height: 99%;
  }

  100%{
    width: 100%;
     height: 100%;  
  }
}
@keyframes text{
 0%{
     width:100%;  
     height:100%;
  }
  10%{
    width:100%;  
     height:100%;   
  }
  50%{
     width: 99%;
     height: 99%;
  }
 
  100%{
    width: 100%;
     height: 100%;  
  }
}

Alles anzeigen

HTML-Code:

HTML

<div id="newsfeld"><img id="newstext" src="images/Zeichnungen/News1.png" width="249" height="145" alt="NEWS"></div>

Vielen Dank schonmal
lg Nadja

explanator

Schau mal im Firefox in die Fehlerkonsole, da werden jede Menge Fehler angezeigt.

Sogar auf der Webseite erscheint Folgendes:

Code

[B]Warning[/B]:  mysql_fetch_assoc() expects parameter 1 to be resource, null given in [B]/www/htdocs/v155934/_playground/fuxdesign/index.php[/B] on line [B]124[/B]


[B]Warning[/B]:  mysql_data_seek() expects parameter 1 to be resource, null given in [B]/www/htdocs/v155934/_playground/fuxdesign/index.php[/B] on line [B]133[/B]

Dominikgt

würd mal behaupten dass es daran liegt, dass du eine animation abfährst die 6 sekunden dauern soll und du aber nur 2px in der breite und 1px in der höhe animierst. rein rechnerisch müsste jede sekunde dann 0,33px vergrößert werden. der kleinste wert ist aber 1px. daher "ruckelt" es...
korrigiert mich, falls ich gerade nen denkfehler hab

nadjak

Ja, das mit der zu langen Zeit und der zu kleinen Skalierung war auch meine Vermutung. Ich hab das mit der Grafikerin geklärt und beides geändert.
Danke für eure Ratschläge.
lg NAdja

Tags