Tengo un sitio web donde el contenido cambia automáticamente como se muestra a continuación.
Pero no funciona en IOS y safari.
¿El giro no funciona aquí? o estoy haciendo algo mal?
Si se trata de un problema con IOS y Safari, ¿cómo puedo tener un texto alternativo para que no se vea vacío?
#spin { color: red; } #spin:after { content: ""; animation: spin 12s linear infinite; } @keyframes spin { 0% { content: "Hello 1"; } 25% { content: "Hello 2"; } 50% { content: "Hello 3"; } 75% { content: "Hello 4"; } 100% { content: "Hello 5"; } } <h1> Say a warm <br/> <span id="spin"></span> </h1>Safari tiene problemas cuando se trata de animar la propiedad de contenido. Haz esto en su lugar:
#spin { color: red; line-height: 1.2em; height: 1.2em; overflow: hidden; display: inline-block; } #spin:after { content: "Hello 1\A Hello 2\A Hello 3\A Hello 4\A Hello 5"; display: block; white-space: pre; animation: spin 4s infinite steps(5); } @keyframes spin { 100% { transform: translateY(-100%) } } <h1> Say a warm <br/> <span id="spin"></span> </h1>Reemplace esto:
#spin { color: #red; }Con este:
#spin { display: block; color: #red; }He leído que también funciona usando:
display: inline-block;