Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » animación de imágenes en css

CSS - animación de imágenes en css

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)animación de imágenes en css
lisandro (31/03/2017 01:19:37)555 visitas
0 respuesta
sin imagen de perfil
Val: 1
Ha aumentado su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

animación de imágenes en css

Publicado por lisandro (1 intervención) el 31/03/2017 01:19:37
tengo un problema que me esta rompiendo la cabeza! hago publicidades en mi pagina con fotos! luego las animo con css3. el tema es que me deja animar solo la primer publicidad! cuando subo a la hoja css los url de las fotos de la siguiente publicidad, dreamweaber me pone lineas en rojo, y me dice "expected Rbrace at line x". aca les dejo esa parte del css


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
42
43
44
45
46
47
48
#publicidades #publi2 {

	width: 100%;
	height: 165px;
	margin-top: 1%;
	float:right;
	background: transparent url(../imagenes/publicidades/Cardon/cardon1.png) no-repeat center;
	background: transparent url(../imagenes/publicidades/Cardon/cardon2.png) no-repeat center;
	background: transparent url(../imagenes/publicidades/Cardon/cardon3.png) no-repeat center;
	background: transparent url(../imagenes/publicidades/Cardon/cardon4.png) no-repeat center;
	background-size: contain;
	animation: cardon 25s infinite;
	-webkit-animation: cardon 25s  infinite;
	-moz-animation: cardon 25s  infinite;
	-o-animation: cardon 25s  infinite;
 
}
 
@keyframes cardon{
	0%, 20%{background-image: url(../imagenes/publicidades/Cardon/cardon1.png);}
	20%, 40%{background-image: url(../imagenes/publicidades/Cardon/cardon2.png);}
	40%, 60%{background-image: url(../imagenes/publicidades/Cardon/cardon3.png);}
	60%, 80%{background-image: url(../imagenes/publicidades/Cardon/cardon4.png);}
	80%, 100%{background-image: url(../imagenes/publicidades/Cardon/cardon1.png);}
}
 
/*------------------------------hasta aqui, la primer publicidad funciona correctamente. pero luego quiero hacer lo mismo en otro div con imágenes diferentes y me sale lo que puse anteriormente en mi comentario. el mensaje de error aparece justo en todas las lineas de las imágenes nuevas------------------------------------------*/
 
 
#publicidades1 #publi3 {

	width: 100%;
	height: 165px;
	margin-top: 1%;
	float:right;
	background: transparent url(../imagenes/publicidades/Diseñamos escudos/diseñamos1.jpg) no-repeat center;
	background: transparent url(../imagenes/publicidades/Diseñamos escudos/diseñamos2.jpg) no-repeat center;
	background-size: contain;
	animation: disclubes 25s infinite;
	-webkit-animation: disclubes 25s infinite;
	-moz-animation: disclubes 25s infinite;
	-o-animation: disclubes 25s infinite;
 
}
 
@keyframes disclubes{
	0%, 20%{background-image: url( ../imagenes/publicidades/Diseñamos escudos/diseñamos1.jpg);}
	20%, 40%{background-image: url( ../imagenes/publicidades/Diseñamos escudos/diseñamos2.jpg);}
	80%, 100%{background-image: url( ../imagenes/publicidades/Diseñamos escudos/diseñamos1.jpg);}
}
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