Problema con una animacion de un slider que funciona en todos los navegadores pero no en mozilla
Publicado por Juan (1 intervención) el 25/06/2020 04:02:28
Hola chicos, buenas noches, soy nuevo en esto de los foros, me disuclpan si no se como es la dinamica. Hice una slider con animacion de unas fotos que van apareciendo en un tiempo determinado y me ha corrido la aniamcion en todos los navegadores excepto en mozilla, he leido sobre los prefijos pero ya intente colocarle y nada que corre la animacion, les agradezco si me pueden ayudar profa, gracias de antemano!
Aca la hoja de estilos:
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
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Un titulo cualquiera</title>
<link rel="stylesheet" href="estilos.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="menufondo">
<div id="menucontenido">
<div id="logomenu">
<img src="img/logo.png">
</div>
<div id="botonesmenu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Boton 2</a></li>
<li><a href="#">Boton 3</a></li>
<li><a href="#">Boton 4</a></li>
<li><a href="#">Boton 5</a></li>
</ul>
</div>
</div>
</div>
<div id="slider">
<img src="img/slide1.jpg" id="img-banner">
<img src="img/slide2.jpg" id="img-banner">
<img src="img/slide3.jpg" id="img-banner">
<img src="img/slide4.jpg" id="img-banner">
<div id="banner-slider">
<div class="banner-contenido">
<h2 id="titulo-banner">LOREM IPSUM DOLOR</h2>
<div id="linea-banner"></div>
<p id="parrafo-banner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div id="banner-slider2">
<div class="banner-contenido">
<form id="form" action="">
<p id="titulo-form">Introduzca sus datos:</p>
<input type="text" name="nombre" placeholder="Nombre">
<input type="text" name="nacionalidad" placeholder="Nacionalidad">
<input id="boton" type="submit">
</form>
</div>
</div>
</div>
</body>
</html>
Aca la hoja de estilos:
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
@keyframes slide {0% {background-image: url(img/slide1.jpg)}
10% {background-image: url(img/slide1.jpg)}
15% {background-image: url(img/slide2.jpg)}
35% {background-image: url(img/slide2.jpg)}
40% {background-image: url(img/slide3.jpg)}
60% {background-image: url(img/slide3.jpg)}
65% {background-image: url(img/slide4.jpg)}
85% {background-image: url(img/slide4.jpg)}
90% {background-image: url(img/slide1.jpg)}
100% {background-image: url(img/slide1.jpg)}
}@-webkit-keyframes slide {
0% {background-image: url(img/slide1.jpg)}
10% {background-image: url(img/slide1.jpg)}
15% {background-image: url(img/slide2.jpg)}
35% {background-image: url(img/slide2.jpg)}
40% {background-image: url(img/slide3.jpg)}
60% {background-image: url(img/slide3.jpg)}
65% {background-image: url(img/slide4.jpg)}
85% {background-image: url(img/slide4.jpg)}
90% {background-image: url(img/slide1.jpg)}
100% {background-image: url(img/slide1.jpg)}
}@-webkit-keyframes mostrarArriba {
0% {
-webkit-transform: translateX(60px);
transform: translateX(60px);
}100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}}@keyframes mostrarArriba {0% {
-webkit-transform: translateX(60px);
transform: translateX(60px);
}100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}}::-webkit-input-placeholder { color: white; }
:-moz-placeholder { /* Firefox 18- */ color: white; }
::-moz-placeholder { /* Firefox 19+ */ color: white; }
:-ms-input-placeholder { color: white; }
h1{font-size: 60px;
color: white;font-family: sans-serif;
font-weight: 550;
}h2 {font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #2e2e2e;
font-size: 30px;
}p{font-size: 25px;
color: white;font-family: 'Open Sans', sans-serif;
font-weight: 400;
}#menufondo{ position: fixed; top: 0; left: 0; right: 0;display: -webkit-box;
display: -ms-flexbox;
display: flex;background: #1c518e;
border-bottom: 2px solid #1c518e;
height: 74px;z-index: 3;
}#menucontenido{padding-top: 8px;
margin-left: auto;
margin-right: auto;
}#logomenu { display: block; float: left;}#logomenu img{ height: 60px;}#botonesmenu{margin-top: 20px;
margin-left: 70px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; float: right;}a{-webkit-text-decoration-line: none;
text-decoration-line: none;
color: white;font-family: 'Roboto', sans-serif;
}li{ display: inline;margin-left: 10px;
margin-right: 10px;
}#slider{width: 100%;
height: 712px;-webkit-animation: slide 30s infinite alternate;
animation: slide 30s infinite alternate;background-size: cover;
background-position: top;
}Valora esta pregunta
0