Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht“

d3mueller

d3mueller

PC-Freak :D

Hi, habe mir folgenden Code gebastelt: (Tut mir leid, wenn er ein wenig unübersichtlich gemacht ist, aber ich bin nicht so gut im Code sortieren^^)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.aussen {
    overflow:hidden;
    width: 500px;
    height: 300px;
background: #104E8B;
background: -moz-linear-gradient(bottom, #104E8B 0%, #1874CD 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#104E8B), color-stop(100%,#1874CD));
background: -webkit-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -o-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -ms-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: linear-gradient(bottom, #104E8B 0%,#1874CD 100%);

border: 1px solid #fff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
} 
.innen {
    color: white;
    font-weight: bold;
    padding-top:5px;
    text-align:center;
    width:100%;
    height: 0%;
    background: white;
    opacity: 0;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
}
.aussen:hover .innen{
    opacity: .8;    
    height:100%;
    padding-top:45%;
    background: #104E8B;
    background: -moz-linear-gradient(top, #104E8B 0%, #1874CD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104E8B),                 color-stop(100%,#1874CD));
    background: -webkit-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -o-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -ms-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: linear-gradient(top, #104E8B 0%,#1874CD 100%);
}
h1 {
    text-shadow: 0px 0px 3px black;
}
</style>
</head>

<body>

<div class="aussen">
<div class="innen"><h1>DATUM/UHRZEIT</h1></div>

</div>

</body>
</html>
Ist lang, sry, aber in Firefox funktioniert er prima. In Chrome geht zwar die Animation an sich, aber beim Mouseout stimmt sie nicht ganz (nicht schlimm, ist aber ein kleiner Schönheitsfehler).
Bloß beim IE geht die Animatio gar nicht. Dort erscheint der Text ohne jede Animation.
Geht das einfach noch nicht beim IE, oder habe ich was falsch gemacht/vergessen.

Danke schon mal für eure Hilfe
Lg
Dennis

EDIT: Dann noch eine kurze Frage:
Wenn ich bei .innen das
overflow:hidden; wegmach, wird der Kasten beim hovern viel zu hoch, obwohl ich doch height auf 100% gestellt habe, oder? Weil so ist es mit der Textpositionierung schwerer.
 
Zuletzt bearbeitet:

vincitore

vincitore

Aktives Mitglied

AW: CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht

Also beim IE9 gehen noch keine Transitions, wie es bei dem neuen Aussieht kA.

Das sie bei dir nicht gut aussieht, liegt daran, dass du beim Padding-top: von px auf % umspringst. Wenn du z.B. von 1% auf 45% gehst funktioniert es.
 
Zuletzt bearbeitet:
d3mueller

d3mueller

PC-Freak :D

AW: CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht

vincitore schrieb:
Also beim IE9 gehen noch keine Transitions, wie es bei dem neuen Aussieht kA.
Zum Vergrößern anklicken....
Das is ja blöd xD. Naja, habe die, dien IE benutzen halt Pech gehabt
Das sie bei dir nicht gut aussieht, liegt daran, dass du beim Padding-top: von px auf % umspringst. Wenn du z.B. von 1% auf 45% gehst funktioniert es.[/QUOTE]
Ah, danke bei Chrome geht es jetzt. :)
Nur das mit der Höhe ist immer noch komisch:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trainingszeiten_Tabelle</title>
<style type="text/css">
.aussen {

    width: 500px;
    height: 300px;
background: #104E8B;
background: -moz-linear-gradient(bottom, #104E8B 0%, #1874CD 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#104E8B), color-stop(100%,#1874CD));
background: -webkit-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -o-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -ms-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: linear-gradient(bottom, #104E8B 0%,#1874CD 100%);

border: 1px solid #fff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
} 
.innen {
    color: white;
    font-weight: bold;
    padding-top:1%;
    text-align:center;
    width:100%;
[COLOR=Red]    height: 0%;[/COLOR]
    background: white;
    opacity: 0;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
}
.aussen:hover .innen{
    opacity: .8;  
[COLOR=Red]    height: 100%;[/COLOR]
    padding-top:45%;
    background: #104E8B;
    background: -moz-linear-gradient(top, #104E8B 0%, #1874CD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104E8B),             color-stop(100%,#1874CD));
    background: -webkit-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -o-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -ms-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: linear-gradient(top, #104E8B 0%,#1874CD 100%);
}
h1 {
    text-shadow: 0px 0px 3px black;
}
</style>
</head>

<body>

<div class="aussen">
<div class="innen"><h1>DATUM/UHRZEIT</h1></div>

</div>

</body>
</html>
Habe hier mal das overflow:hidden entfernt, aber es ist immer noch zu groß.
Habe auch versucht, überall die Höhe in px zu schreiben. Hat auch nichts geholfen.
 
F

febLey

Photoshop Neuling

AW: CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht

Also ich habe nur das Padding Top bei der class .innen auf 10% gestellt und schon sah es gut aus im Chrome (ausgehen von dem ursprungscode im 1. Post):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.aussen {
    overflow:hidden;
    width: 500px;
    height: 300px;
background: #104E8B;
background: -moz-linear-gradient(bottom, #104E8B 0%, #1874CD 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#104E8B), color-stop(100%,#1874CD));
background: -webkit-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -o-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -ms-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: linear-gradient(bottom, #104E8B 0%,#1874CD 100%);

border: 1px solid #fff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
} 
.innen {
    color: white;
    font-weight: bold;
    [B]padding-top:10%;[/B]
    text-align:center;
    width:100%;
    height: 0%;
    background: white;
    opacity: 0;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
}
.aussen:hover .innen{
    opacity: .8;    
    height:100%;
    padding-top:45%;
    background: #104E8B;
    background: -moz-linear-gradient(top, #104E8B 0%, #1874CD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104E8B),                 color-stop(100%,#1874CD));
    background: -webkit-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -o-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -ms-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: linear-gradient(top, #104E8B 0%,#1874CD 100%);
}
h1 {
    text-shadow: 0px 0px 3px black;
}
</style>
</head>

<body>

<div class="aussen">
<div class="innen"><h1>DATUM/UHRZEIT</h1></div>

</div>

</body>
</html>
 
Zuletzt bearbeitet:
d3mueller

d3mueller

PC-Freak :D

AW: CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht

febLey schrieb:
Also ich habe nur das Padding Top bei der class .innen auf 10% gestellt und schon sah es gut aus im Chrome (ausgehen von dem ursprungscode im 1. Post):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.aussen {
    overflow:hidden;
    width: 500px;
    height: 300px;
background: #104E8B;
background: -moz-linear-gradient(bottom, #104E8B 0%, #1874CD 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#104E8B), color-stop(100%,#1874CD));
background: -webkit-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -o-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: -ms-linear-gradient(bottom, #104E8B 0%,#1874CD 100%);
background: linear-gradient(bottom, #104E8B 0%,#1874CD 100%);

border: 1px solid #fff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

-moz-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #666, inset 0 0 5px #ddd;
box-shadow: 0 0 15px #333, inset 0 0 1px #333;
} 
.innen {
    color: white;
    font-weight: bold;
    [B]padding-top:10%;[/B]
    text-align:center;
    width:100%;
    height: 0%;
    background: white;
    opacity: 0;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
}
.aussen:hover .innen{
    opacity: .8;    
    height:100%;
[COLOR=Red]    padding-top:45%;[/COLOR]
    background: #104E8B;
    background: -moz-linear-gradient(top, #104E8B 0%, #1874CD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104E8B),                 color-stop(100%,#1874CD));
    background: -webkit-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -o-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: -ms-linear-gradient(top, #104E8B 0%,#1874CD 100%);
    background: linear-gradient(top, #104E8B 0%,#1874CD 100%);
}
h1 {
    text-shadow: 0px 0px 3px black;
}
</style>
</head>

<body>

<div class="aussen">
<div class="innen"><h1>DATUM/UHRZEIT</h1></div>

</div>

</body>
</html>
Zum Vergrößern anklicken....
Ja, es geht schon, aber mich wundert es, dass, wenn ich overflow:hidden wegmache, dass es dann viel zu hoch ist, obwohl es ja in dem blauen Div bleiben sollte. Weil beim 2. padding-top (in Code rot markiert) steht ja 45%, aber der Text ist ja so etwa bei 95% des Divs.
Es ist möglich, aber schwerer einzustellen.


Janean schrieb:
html gelernt, ein wenig
Zum Vergrößern anklicken....
? Wie meinst du das :D?
 
vincitore

vincitore

Aktives Mitglied

AW: CSS3 Transition funktioniert in Chrome schlecht und im Internetexplorer gar nicht

febLey schrieb:
Also ich habe nur das Padding Top bei der class .innen auf 10% gestellt und schon sah es gut aus im Chrome (ausgehen von dem ursprungscode im 1. Post):
Zum Vergrößern anklicken....
siehe mein Post ;)

d3mueller schrieb:
Ja, es geht schon, aber mich wundert es, dass, wenn ich overflow:hidden wegmache, dass es dann viel zu hoch ist, obwohl es ja in dem blauen Div bleiben sollte. Weil beim 2. padding-top (in Code rot markiert) steht ja 45%, aber der Text ist ja so etwa bei 95% des Divs.
Es ist möglich, aber schwerer einzustellen.
Zum Vergrößern anklicken....

http://www.w3schools.com/css/css_boxmodel.asp
Lies dir am Besten das mal durch, wenn du height 100% nimmst und padding-top: 45% hat dein div ne effektive Höhe von 145%(bei Padding-bottom:0; margin:0; )
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 1.364 (Mitglieder: 8, Gäste: 1.356)
Robots: 410

Statistik des Forums

Themen
175.188
Beiträge
2.582.071
Mitglieder
67.257
Neuestes Mitglied
Can Ergin
Oben