CSS - NO SALE LA TRANSITION

   
Vista:
Imágen de perfil de Jaimie

NO SALE LA TRANSITION

Publicado por Jaimie (14 intervenciones) el 07/09/2015 23:14:15
Hola a todos/as: Tengo un problemita, hice un carrusel de imagenes con trasitions y les puse los prefijos moz y webkit pero si la miro en una tablet, ssale las fotos todo pero na la transition lo mismo en un iphone, en google crohme bien.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.galeria:before {
  content: "";
  position: absolute;
  width: 100%;
  max-width:100%;
  height: 100%;
  background: url(FOTOSMETAL\tarjeta.jpg);
  background-size: cover;
  -moz-background-size:cover;
  -webkit-background-size:cover;
 
  opacity: .1;
}
.miniatura {
  position: relative;
  width:10%; /* Thumbnail width */
  padding-bottom: 10%; /* Same as width for square thumbnail */
 
  background-position:50% 50%;
  background-size: cover;
  -moz-background-size:cover;
  -webkit-background-size:cover;
  cursor: pointer;
}
.miniatura:before {
  content: "";
  position: absolute;
  top: -1100%; /* ((No.images*2)-1)*100*/
  left: 250%;
  width: 600%; /* (10000/width.miniatura)-100 */
  height:600%; /* No.images*100 */
  border: 5px solid white;
  box-sizing: border-box;
  background-image: inherit;
  background-size: cover;
 -moz-background-size:cover;
 -webkit-background-size:cover;
  transition: all .8s;
  -webkit-transition:all .8s;
  -moz-transition:all .8s;
}

Esto lo hice solo con css en el html puse un div , pero las imagenes las coloque directamente de css...gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

NO SALE LA TRANSITION

Publicado por xve (352 intervenciones) el 08/09/2015 10:31:37
Hola Jamie, viendo únicamente el estilo, parece que esta bien, aunque no se como pusiste el html ni las imágenes, por lo que no lo podemos probar...
No se hasta que punto funciona bien el transition en el :before...

Hay algun manera de visualizar todo el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jaimie

NO SALE LA TRANSITION

Publicado por Jaimie (14 intervenciones) el 08/09/2015 19:48:30
Gracias te lo dejare aqui en HTml
1
2
3
4
5
6
7
8
<div class="galeria">
                        <div class="miniatura"></div>
                        <div class="miniatura"></div>
                        <div class="miniatura"></div>
                        <div class="miniatura"></div>
                        <div class="miniatura"></div>
                        <div class="miniatura"></div>
               </div>
Y el resto de css3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.miniatura:nth-of-type(1) {
  background-image: url(FOTOSMETAL/foto5.jpg);
}
.miniatura:nth-of-type(2) {
  background-image: url(FOTOSMETAL/lamp2.jpg);
}
.miniatura:nth-of-type(3) {
  background-image: url(FOTOSMETAL/foto6.jpg);
}
.miniatura:nth-of-type(4) {
  background-image: url(FOTOSMETAL/lamp3.jpg);
}
.miniatura:nth-of-type(5) {
  background-image: url(FOTOSMETAL/foto2-2.jpg);
}
.miniatura:nth-of-type(6) {
  background-image: url(FOTOSMETAL/lamp.jpg);
}
.miniatura:hover:before {
  transform: scale(.9);
}
.miniatura:hover:nth-of-type(1):before {
  top: 0%;
}
.miniatura:hover:nth-of-type(2):before {
  top: -100%;
}
.miniatura:hover:nth-of-type(3):before {
  top: -200%;
}
.miniatura:hover:nth-of-type(4):before {
  top: -300%;
}
.miniatura:hover:nth-of-type(5):before {
  top: -400%;
}
.miniatura:hover:nth-of-type(6):before {
  top: -500%;
}

Gracias..supuestamente funciona en safari, pero tengo la duda por el cursor ya que lo puse en pointer, funciona bien en windows pero ipad o cell no funciona...gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

NO SALE LA TRANSITION

Publicado por Angel Komander (54 intervenciones) el 08/09/2015 21:22:06
amigo cual es tu problema entonces?
yo lo veo bien y en todo caso en celulares no funcionaria por que no tienen efecto hover, para eso tendrias que usar Onclick o la Function de .click de Jquery ;)

http://codepen.io/AngelKrak/pen/JYdZNr
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jaimie

NO SALE LA TRANSITION

Publicado por Jaimie (14 intervenciones) el 09/09/2015 15:30:37
Entonces tengo que usar s fuerza jquery para verlo en celulares la transition o ipad...Gracias de anetmano
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

NO SALE LA TRANSITION

Publicado por Angel Komander (54 intervenciones) el 09/09/2015 19:20:42
mira amigo, encontre esta solucion de un amigo en otro foro, talves te sirva ;)
1
2
3
4
5
6
7
8
9
Hola,
 
Los dispositivos iOS tienen una peculiaridad, y es que el navegador, "transforma" nativamente los hovers por pulsaciones (o tap), es decir, si tienes un elemento que se despliega en el hover y se navega con click, en un dispositivo táctil de Apple, Safari transformará el hover en un tap y para navegar, otro tap.
 
Es una solución que me parece válida para dispositivos táctiles, el problema surge en dispositivos táctiles no iOS, como Android. No he encontrado un navegador para Android que tenga esta funcionalidad, para ello has de utilizar un JS que detecte el tipo de navegador empleado en ese dispositivo y en ese caso simular el mismo comportamiento.
 
El script que utilizo para esto se llama "DoubleTapToGo.js" - "='http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js' target='_blank' class='editor_url'>http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js". Aquí una explicación de su funcionamiento - ='http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly' target='_blank' class='editor_url'>http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly.
 
He utilizado este script en desarrollos web responsive, dándome resultados consistentes en navegadores de escritorio como Firefox, Chrome, IE y en dispositivos táctiles Android (navegadores Chrome y Firefox) e iOS (Safari). No lo he probado en navegadores más minoritarios como Opera, Dolphin, etc.

Por cierto amigo, ese Tema que publicastes es lo mismo que te estamos ayudando aqui y ya te di una solucion que no es html nose por que lo publicastes ahi .-.
http://www.lawebdelprogramador.com/foros/CSS/1513230-Transiciones-o-animaciones-para-una-Tablet-o-cell.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar