CSS: Animation SlideUp unterschiedliches Ergebnis von Chrome zu Firefox
Moin Moin,
ich habe in CSS eine Slideshow nach oben erstellt, jetzt habe ich das Problem, dass es zwischen Chrome und Firefox einen Höhenunterschied beim verschieben gibt.
Bedeutet, in Chrome schiebt er es perfekt hoch wie es soll, jedoch in Firefox nicht.
HTML:
CSS:
Wenn ich jetzt im Keyframe die Y -200px; auf -250px; erhöhe, passt es in Firefox aber dann in Chrome nicht. Habe schon das ganze mit -webkit probiert und auch weiter an den Werten herumgespielt. Jedoch komme ich nicht auf ein gleiches resultat in beiden Browsern.
Vielleicht hat hier jemand einen Rat.
VG Kevin
ich habe in CSS eine Slideshow nach oben erstellt, jetzt habe ich das Problem, dass es zwischen Chrome und Firefox einen Höhenunterschied beim verschieben gibt.
Bedeutet, in Chrome schiebt er es perfekt hoch wie es soll, jedoch in Firefox nicht.
HTML:
<ul class="typewriter-dynamictext" style="width:400px; line-height:50px">
CSS:
.typewriter {
font-family: 'Poppins', sans-serif;
display: inline-block;
position:relative;
font-size: 40px;
font-weight: 700;
margin-top: -1150px;
margin-left: 870px;
z-index:4;
line-height: auto;
}
.typewriter-dynamictext li{
position:relative;
display: inline-block;
list-style: none;
top:0;
animation: slide 6s steps(4) infinite;
}
.typewriter-dynamictext li span{
font-family:'Poppins', sans-serif;
justify-content: center;
text-align:center;
position: relative;
display: inline-block;
color: #000;
letter-spacing: 2px;
overflow:hidden;
white-space: nowrap;
animation: typing 1.5s steps(13, end) infinite;
animation-timing-function: linear;
border-right: 4px solid darkslategray;
box-sizing: border-box;
}
@keyframes slide{
100%{
transform: translate(0, -200px);
}
}
Wenn ich jetzt im Keyframe die Y -200px; auf -250px; erhöhe, passt es in Firefox aber dann in Chrome nicht. Habe schon das ganze mit -webkit probiert und auch weiter an den Werten herumgespielt. Jedoch komme ich nicht auf ein gleiches resultat in beiden Browsern.
Vielleicht hat hier jemand einen Rat.
VG Kevin
Please also mark the comments that contributed to the solution of the article
Content-Key: 871016203
Url: https://administrator.de/contentid/871016203
Printed on: May 11, 2024 at 14:05 o'clock