28172 sujets

CSS et mise en forme, CSS3

Proprièté "transform" ne fonctionne pas sur safari????

Bonjour,

si quelqu'un peut m'aider à mon prob, je "pense" que le code est bon mais ne fonctionne pas sur rastafary

.view-second img {
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    -ms-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
}
.view-second .mask {
    background-color: rgba(115, 146, 184, 0.7);
    height: 300px;
    opacity: 0;
    padding: 120px;
    -webkit-transform: translate(265px, 145px) rotate(45deg);
    -moz-transform: translate(265px, 145px) rotate(45deg);
    -o-transform: translate(265px, 145px) rotate(45deg);
    -ms-transform: translate(265px, 145px) rotate(45deg);
    transform: translate(265px, 145px) rotate(45deg);
    
	-webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    width: 300px;
}
.view-second h2 {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-family: "FUTRFW";
    font-size: 12px;
    left: 0;
    margin: -4px 0 0;
    -webkit-transform:translate(300px, -200px);
    -moz-transform:translate(300px, -200px);
    -o-transform:translate(300px, -200px);
    -ms-transform:translate(300px, -200px);
    transform:translate(300px, -200px);
    
	-webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.view-second p {
    -webkit-transform: translate(-200px, 200px);
    -moz-transform: translate(-200px, 200px);
    -o-transform: translate(-200px, 200px);
    -ms-transform: translate(-200px, 200px);
    transform: translate(-200px, 200px);
    
	-webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.view-second a.info {
    -webkit-transform: translate(0px, 105px);
    -moz-transform: translate(0px, 105px);
    -o-transform: translate(0px, 105px);
    -ms-transform: translate(0px, 105px);
    transform: translate(0px, 105px);
    
	-webkit-transition: all 0.2s ease-in-out 0.1s;
    -moz-transition: all 0.2s ease-in-out 0.1s;
    -o-transition: all 0.2s ease-in-out 0.1s;
    -ms-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
}
.view-second:hover .mask {
    opacity: 1;
    -webkit-transform: translate(-80px, -125px) rotate(45deg);
    -moz-transform: translate(-80px, -125px) rotate(45deg);
    -o-transform: translate(-80px, -125px) rotate(45deg);
    -ms-transform: translate(-80px, -125px) rotate(45deg);
    transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    
	-webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.view-second:hover p {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    
	-webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.view-second:hover a.info {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    
	-webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

En gros aucune réaction du code, merci d'avance.
Modifié par kabaz (26 Feb 2015 - 08:55)
Bonjour.

On ne sait pas ce que tu attends, et ce que ça fait en réalité, mais surtout, on a pas d'HTML !
Oui et puis bon... s'il faut reproduire le code en local à chaque fois que quelqu'un pose une question... Un exemple sur code pen (par exemple) c'est mieux.
Modifié par Olivier C (26 Feb 2015 - 07:46)
Bonjour,
Voici le code en HTML

<div class="view view-second">
	<img src="img/cooking_xl.png" />
	<div class="mask"></div>
	<div class="content">
	          <h2>turlututu</h2>
                  <p>fait pour garder la forme</p>
       </div>
</div>

ma question est pourquoi tous fonctionne sur d'autres navigateurs et pas sur safari?
Modifié par kabaz (26 Feb 2015 - 10:27)
kabaz a écrit :
Voici le test

Bien ! Alors, en ce qui me concerne, je n'ai aucun problème d'animation sous Safari, mais je suis déjà sur la version 8 (8.0.2).
J'ai fait aussi le test sur safari ça fonctionne (8.0.3), mais sur le site, il n'y aucune réaction et c'est bien là le problème...
Problème résolu, je ne sais pas ce qui c'est passé. Ça fait un mois que je me casse la tête dessus. Smiley biggol
Maintenant, ma grand question qui est la suivante, pourrait-il avoir des bug sur les serveurs de one&one?
Modifié par kabaz (27 Feb 2015 - 15:06)
Cette question n'a rien à voir avec les serveurs : l'animation css est uniquement un problème de configuration côté client. Il devait y avoir un problème de paramétrage quelque part, un style non appelé, une classe manquante, des fichiers non mis à jour, ou quelque chose de ce genre...
Salut,
kabaz a écrit :
petite question: est-ce qu'il y a sur safari un plug aussi intuitif que firebug??

Sur n'importe quel élément de la page, clic droit > Inspecter l'élément et tu te fais ouvrir l'inspecteur de Safari, qui est fourni avec le navigateur et que tu peux également ouvrir avec le raccourci clavier Cmd + Alt + I. Pense également à afficher le menu Développement dans les préférences de Safari.

Soit dit en passant, il s'agit de la propriété transform, pas d'un attribut (il s'agit ici de CSS, pas de HTML ou de SVG).
Modifié par Victor BRITO (27 Feb 2015 - 21:21)
Olivier C a écrit :
Cette question n'a rien à voir avec les serveurs : l'animation css est uniquement un problème de configuration côté client. Il devait y avoir un problème de paramétrage quelque part, un style non appelé, une classe manquante, des fichiers non mis à jour, ou quelque chose de ce genre...


Merci pour ta réponse mais tu vois je n'ai vraiment rien touché de mon code à ce jour, et ce c'est mis en place il y a juste 2 jours à n'y rien comprendre. A la base je transférai mon code via mon laptop windows, j'avais effacé et remis les dossiers plus d'une fois... et que peu être, du fait que j'ai transféré les fichiers via mon mac ce c'est mis en place...
Enfin bref cela fonctionne, et encore mercis pour vos réponses.
et bonne continuation à vous
Modifié par kabaz (28 Feb 2015 - 10:44)
Victor BRITO a écrit :

Soit dit en passant, il s'agit de la propriété transform, pas d'un attribut (il s'agit ici de CSS, pas de HTML ou de SVG).


Modif effectué, merci pour m'avoir repris Smiley cligne
Sujet clos
Aller à