Transition CSS3 avec Safari

aiglobulles

19 Jan 2015 à 11:43

Re bonjour,

ma deuxième question du jour Smiley smile

Toujours sur ce site http://nicolasmazieres.com (j'espère ne pas passer pour un troll, ce n'est pas mon objectif...)
j'ai mis en place un menu glissant de gauche à droite qui s'active au passage de la souris. La translation fonctionne bien sur tous les navigateurs que j'ai testé à l'exception de safari. La translation fonctionne certes, mais il n'y a pas cette effet glissant. Le menu se déplace en fait sans transition.
D'après ce que j'ai lu, safari est censé être compatible avec ce type d'animation, mais il ne prend visiblement pas en compte la durée de l'animation. Est-ce normal ? Existe -il un moyen d'obtenir cette transition sur safari ?

Mon code actuel:


.site-header {
	height: 100%;
	width: 280px;
	position: fixed;
	background: rgba(0, 0, 0, .6);
	top: 0;
	left: -220px;
	transition: transform 0.5s ease-in-out;	
	-webkit-transition: transform 0.9s ease-in-out, -webkit-transform 0.9s; 
	padding-top: 40px;	
	margin-top: 0;
}
.site-header:hover {
	transform: translateX(220px);  
	-moz-transform: translateX(220px);
	-o-transform: translateX(220px);
	-webkit-transform: translateX(220px);
}

Merci d'avance, cordialement votre

Bruno

Geoffrey C.

4 Feb 2015 à 11:40

Hello,

J'ai déjà eu le bug effectivement, et pour m'assurer de la compatibilité, j'ai fini par appliquer la transition sur all.

Ton code :

.site-header {
	transition: all 0.5s ease-in-out;	
	-webkit-transition: all 0.9s ease-in-out; 
}

C'est un poil moins performant, mais si tu n'as pas 40 animations simultanées avec des shadows partout ça devrait être supportable Smiley langue

Bonne continuation.

PS. il se passe quoi si je navigue au clavier sur ton site ? Smiley confus

Modifié par Geoffrey C. (04 Feb 2015 - 11:41)

CSS et mise en forme, CSS3

Transition CSS3 avec Safari