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%;
}
}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
