zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit FF16+ und CSS transitions

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.10.2012, 22:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.07.2012
Beiträge: 18
csspauli befindet sich auf einem aufstrebenden Ast
Standard Problem mit FF16+ und CSS transitions

Hallo Leute,

ich kapiere es einfach nicht.
Mit FF16+ wurden zwar die Prefixes für die CSS-Transitions entfernt, aber trotzdessen funktioniert mein "alter" Code noch mit den Prefixes.

Mein Problem:
Auf einer Website habe ich an vielen Stellen mit den CSS-Transitions gearbeitet. Z.B. im Header und im Footer.

Im Header funktioniert alles wie gehabt, ohne eine Änderung.
Im Footer funktioniert gleicher Code nicht.

Was ist nur los, wo kann ansetzen, hat jemand Ideen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.10.2012, 22:58
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von csspauli Beitrag anzeigen
ich kapiere es einfach nicht.
Mit FF16+ wurden zwar die Prefixes für die CSS-Transitions entfernt, aber trotzdessen funktioniert mein "alter" Code noch mit den Prefixes.
Es ist durchaus möglich, dass für eine Übergangszeit beide Varianten unterstützt werden.

Zitat:
Zitat von csspauli Beitrag anzeigen
Was ist nur los, wo kann ansetzen, hat jemand Ideen?
Den Code herzeigen wäre kein schlechter Anfang.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.10.2012, 23:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.07.2012
Beiträge: 18
csspauli befindet sich auf einem aufstrebenden Ast
Standard

Hi inta,

erstmal vielen Dank für Deine Antwort.
Inzwischen habe ich sogar schon selber herausgefunden woran es liegt.
Die Reihenfolge ist relevant. Wer hätte das gedacht. Nur noch schnell alle Stellen im CSS-Code geändert (ca. 3000 Zeilen, iiih... *gg*) und schon funktioniert es wieder.

Also so funktioniert es:

Code:
	a.footer-logos-logo1 {
		float:					left;
		margin:					1em 1em;
		padding:				0;
		width:					147px;
		height:					36px;
		background-image:			url("../../images/logos/logo1_plain.png");
		background-position:			0 0;
		background-repeat:			no-repeat;
		opacity:				0.1;
		transition-property:			color;
		transition-duration:			0.3s, 0.3s;
		transition-timing-function:		linear, linear;
		-moz-transition-property:		opacity;
		-moz-transition-duration:		0.3s, 0.3s;
		-moz-transition-timing-function:	linear, linear;
		-webkit-transition-property:		color;
		-webkit-transition-duration:		0.3s, 0.3s;
		-webkit-transition-timing-function:	linear, linear;
		-o-transition-property:			color;
		-o-transition-duration:			0.3s, 0.3s;
		-o-transition-timing-function:		linear, linear;
	}
	a.footer-logos-logo1:hover,
	a.footer-logos-logo1:focus {
		opacity:				0.4;
		transition-property:			color;
		transition-duration:			0.3s, 0.3s;
		transition-timing-function:		linear, linear;
		-moz-transition-property:		opacity;
		-moz-transition-duration:		0.3s, 0.3s;
		-moz-transition-timing-function:	linear, linear;
		-webkit-transition-property:		color;
		-webkit-transition-duration:		0.3s, 0.3s;
		-webkit-transition-timing-function:	linear, linear;
		-o-transition-property:			color;
		-o-transition-duration:			0.3s, 0.3s;
		-o-transition-timing-function:		linear, linear;
	}
Relevant ist der Browser-unspezifische Teil, also "transition-*" - der Teil stand am Ende und muss über den Browser-spezifischen Deklarationen stehen.

So haut's hin.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.10.2012, 23:26
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Umgekehrt war es schon richtig, die browserunabhängige Variante sollte immer am Ende stehen.

Das Problem ist meiner Meinung nach deine Variante mit dem -moz-Präfix, dort animierst du die Opazität, bei allen anderen die Farbe.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.10.2012, 23:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.07.2012
Beiträge: 18
csspauli befindet sich auf einem aufstrebenden Ast
Standard

Hi inta,

ich muss sagen: F***!!!
Das gibt's doch wohl nicht.
Das ist mir *nicht* aufgefallen. Tut mir furchtbar leid.

Hab's auch wieder in die richtige Reihenfolge zurückgedreht, und es funktioniert wunderbar.

Für alle also hier nochmal das richtige Beispiel:

Code:
	a.footer-logos-logo1 {
		float:					left;
		margin:					1em 1em;
		padding:				0;
		width:					147px;
		height:					36px;
		background-image:			url("../../images/logos/logo1_plain.png");
		background-position:			0 0;
		background-repeat:			no-repeat;
		opacity:				0.1;
		-moz-transition-property:		opacity;
		-moz-transition-duration:		0.3s, 0.3s;
		-moz-transition-timing-function:	linear, linear;
		-webkit-transition-property:		opacity;
		-webkit-transition-duration:		0.3s, 0.3s;
		-webkit-transition-timing-function:	linear, linear;
		-o-transition-property:			opacity;
		-o-transition-duration:			0.3s, 0.3s;
		-o-transition-timing-function:		linear, linear;
		transition-property:			opacity;
		transition-duration:			0.3s, 0.3s;
		transition-timing-function:		linear, linear;
	}
	a.footer-logos-logo1:hover,
	a.footer-logos-logo1:focus {
		opacity:				0.4;
		-moz-transition-property:		opacity;
		-moz-transition-duration:		0.3s, 0.3s;
		-moz-transition-timing-function:	linear, linear;
		-webkit-transition-property:		opacity;
		-webkit-transition-duration:		0.3s, 0.3s;
		-webkit-transition-timing-function:	linear, linear;
		-o-transition-property:			opacity;
		-o-transition-duration:			0.3s, 0.3s;
		-o-transition-timing-function:		linear, linear;
		transition-property:			opacity;
		transition-duration:			0.3s, 0.3s;
		transition-timing-function:		linear, linear;
	}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 18:37
Css und Steam Problem justinlenz Offtopic 3 27.03.2008 22:58
CSS Problem Adriana CSS 0 09.09.2006 17:51
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
Dringend: CSS Problem! zero CSS 19 31.12.2005 19:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:36 Uhr.