✔ Ist die transition von border-color möglich?

[DrEvil]

Hallo liebe Gemeinde,
ich baue gerade einen Breadcrumb für eine Seite. Die Brotkrumen sind im wesentlichen Kästen mit einem "Pfeil" nach rechts, um auf die nächst tiefere Ebene zu verweisen, in der man sich befindet.

Den Pfeil erzeuge ich indem ich mit :before und :after zwei Dreiecke über einander lege, die Dreiecke werden wiederum mittels der border-Eigenschaft um einem leeren content erzeugt.

Hier einmal die komplette CSS dafür:

/*Breadcrumb*/

#breadcrumb {
	margin: 30px 10px 10px 10px;
	padding-top: 10px;
	
	border-top: 1px dashed #559DB3;
}

#breadcrumb a {
	display: inline-block;
	position: relative;
	padding: 5px 8px 6px 16px; /* @note: unten 1px mehr, damit es mit den Pfeilgrößen sauber abschließt*/
	
	border: 2px solid #BBD8E1;
	border-right: none;
	
	color: #BBD8E1;
	font-size: 80%;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

#breadcrumb a:hover {
	color: #1C4C5C;
	background: #BBD8E1;
}

#breadcrumb a:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	right: -28px;
	top: -2px;
	width: 0;
	height: 0;
	border: 14px solid;
	border-color: transparent transparent transparent #BBD8E1;
}

#breadcrumb a:after {
	content: ' ';
	position: absolute;
	z-index: 2;
	right: -22px;
	top: 1px;
	width: 0;
	height: 0;
	border: 11px solid;
	border-color: transparent transparent transparent #FFF;
}

#breadcrumb a:hover:after {
	border-color: transparent transparent transparent #BBD8E1;
}

Wenn gehovert wird passt sich der Hintergrund - so wie beabsichtigt - langsam an. Lediglich der Pfeil wechselt sofort, ohne einen weichen Übergang. Guckt ihr hier »

Hab schon verschiede transitions probiert, hab mehrere transitions eingebaut (also z.B. bei #breadcrumb a:hover, damit a:hover:after beinflusst werden soll), alles erfolglos.

Jetzt stellt sich mir die Frage, ob die border-color überhaupt mittels CSS animiert werden kann?

Jemand 'ne Idee für mich?

Ich würde gerne ein Übergang mittels opacity vermeiden, damit der grundsätzliche Effekt (Farbwechsel bei :hover) auch im IE funktioniert und ich nicht noch extra nen Workaround dafür machen muss.


Ich bin wie immer für jede Anregung dankbar.

Gruß Eric

 

[DrEvil]

Also mittlerweile weiß ich, dass die transition auf border-color funktioniert. Aber wo liegt nun der Fehler bei mir? :/

 

[CPoly]

Du hast für die beiden Elemente ":before" und ":after" keine transition definiert, sondern nur für die Links selbst.

#breadcrumb a:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    right: -28px;
    top: -2px;
    width: 0;
    height: 0;
    border: 14px solid;
    border-color: transparent transparent transparent #BBD8E1;

    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
 
#breadcrumb a:after {
    content: ' ';
    position: absolute;
    z-index: 2;
    right: -22px;
    top: 1px;
    width: 0;
    height: 0;
    border: 11px solid;
    border-color: transparent transparent transparent #FFF;

    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

 

[DrEvil]

Hey CPoly,
danke, dass du dir das angeguckt hast. Das funktioniert leider nicht.

Es sieht so aus, als ob Pseudo-Elemente einfach nicht mit transitions funktionieren. (Quelle)

Sehr schade.

 

[DrEvil]

HAHA! Mensch überlistet Maschine!

Also mit den Pseudo-Elementen kann man tatsächlich nicht arbeiten (s.o.), aber man kann sich Pseudo-Elemente "simulieren". Ich hab jetzt noch nicht alles getestet, aber ersteinmal funktioniert es wie gewünscht.

<div id="breadcrumb"><a href="#">Start<span class="before">&nbsp;</span><span class="after">&nbsp;</span></a><a href="#">Allgemein<span class="before">&nbsp;</span><span class="after">&nbsp;</span></a><a href="#">Bildergalerie<span class="before">&nbsp;</span><span class="after">&nbsp;</span></a></div>

Statt der Pseudo-Klasse bekommen nun die span-Elemente die transition und tada - es funktioniert!

 

[CPoly]

Ich hatte es zufällig nur in Firefox "4.0 and up" probiert. Schade, dass es nicht überall funktioniert.

 

[djheke]

HAHA! Mensch überlistet Maschine!

Also mit den Pseudo-Elementen kann man tatsächlich nicht arbeiten (s.o.),

Na klar!

Morgen hab ich mehr zeit und es folgt ein Beispiel.
nachti pachti

 

[SpiceLab]

Es sieht so aus, als ob Pseudo-Elemente einfach nicht mit transitions funktionieren. (Quelle)

HAHA! Mensch überlistet Maschine!

Also mit den Pseudo-Elementen kann man tatsächlich nicht arbeiten (s.o.)

Ich hatte es zufällig nur in Firefox "4.0 and up" probiert. Schade, dass es nicht überall funktioniert.

HAHA! Mensch überlistet Maschine!

Also mit den Pseudo-Elementen kann man tatsächlich nicht arbeiten (s.o.)

Na klar!

Morgen hab ich mehr zeit und es folgt ein Beispiel.

Folgt da nun ein transition-/animation-Beispiel für die Pseudoelemente :before und :after unter Berücksichtigung von DrEvils genannten Link bzgl. der derzeitigen Browserunterstützung, das browserübergreifend und abwärtskompatibel funktioniert, wie z.B. im Falle von Firefox?

*gespanntwieeinflitzebogenist*

 

[djheke]

Upps, ich hätte wohl DrEvils Quelle folgen sollen.

Trotzdem hier meine Versuche. Das eigentliche Problem ist aber nicht gelöst, schade.
Versuch 1 für FF
Versuch 2 für fast alle

@ DrEvils. Vielleicht kannst du dich ja damit anfreunden.