html - 动画 CSS 文本不适用于 Iphone

Question

我有一个默认包含背景图像、标题文本和子标题文本的包装器。

查看一些教程后，我发现了如何仅使用 css3 就可以完美地制作动画!非常酷!在电脑上运行良好，但在 Iphone 上运行不正常。任何指导？

 #bannerWrapper {
	width: 100%;
	height: 350px;
	background-color: ;
	overflow: hidden;
	position: relative;
	display: none;
	background-size: cover; 
    background-position: center center; 
    -webkit-background-size: cover;
    -webkit-backgroud-position: center center;
    }

    #galleryWrapper {
	position: absolute;
	width: 100%;
	height: 350px;
	animation: fader 30s cubic-bezier(.8,0,0,.8) infinite;
	-webkit-animation: fader 30s cubic-bezier(.8,0,0,.8) infinite;
	-moz-animation: fader 30s cubic-bezier(.8,0,0,.8) infinite;
	-ms-animation: fader 30s cubic-bezier(.8,0,0,.8) infinite;
	-o-animation: fader 30s cubic-bezier(.8,0,0,.8) infinite;
	-webkit-box-shadow: inset 0 20px 60px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 60px -20px rgba(0,0,0,0.8);
    box-shadow: inset 0 20px 60px -20px rgba(0,0,0,0.8);
    background-size: cover; 
    background-position: center center; 
    -webkit-background-size: cover;
    -webkit-backgroud-position: center center;
    }

    #textWrapper {
	width:90%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	z-index: 98;
	text-align: center;
    }

    .headerWrapper {
	position: relative;
	color: #fff;
	margin: 0 auto;
	font-family: 'Montserrat', sans-serif;
	font-size:40px;
	text-shadow: 2px 2px 20px #000000;
    }

    .headerWrapper:after {
	content: 'Header 1';
	animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
	-webkit-animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
	-moz-animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
	-ms-animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
    }

    .subheaderWrapper {
	position: relative;
	color: #fff;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
	font-size:17px;
	text-shadow: 2px 2px 10px #000000;
	
    }

    .subheaderWrapper:after {
	content: 'Some small description of what We intent to say here in this banner number 1';
	animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
	-webkit-animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
	-moz-animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
	-ms-animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
    }

    @keyframes fader {
	0% {background: url("../images/image1.png"); background-size: cover; background-position: center center; }
	33.33% {background: url("../images/image2.png"); background-size: cover; background-position: center center; }
	66.66% {background: url("../images/image3.png"); background-size: cover; background-position: center center; }
	100% {background: url("../images/image1.png"); background-size: cover; background-position: center center; }
    }

    @keyframes faderText {
	0% {content: "¿Empresa vs Autónomo?";}
	33.33% {content: "¿Qué impuestos paga mi Empresa?";}
	66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
	100% {content: "¿Empresa vs Autónomo?";}
    }

    @keyframes faderText2 {
	0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
	33.33% {content: "Nos encargamos de explicar , preparar y presentar tus impuestos periódicamente";}
	66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
	100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
	
    }

<div id="bannerWrapper">
			<div id="textWrapper">
				<h3 class="headerWrapper"></h3><br>
				<h3 class="subheaderWrapper"></h3>
			</div>
			
			<div id="galleryWrapper">
				<img src="../images/image1.png" alt=""/>
			</div>
		</div>

有人可以告诉我我的代码有什么问题吗？再次，在计算机和安卓设备上完美运行。我认为通过实现 -webkit-animation 可能会起作用，但不行，仍然显示默认文本。我的意思是仍然显示内容:'';来自 .headerWrapper:after 和 .subheaderWrapper:after

的属性

感谢您抽出宝贵时间!

Answer 1

您的 :after 元素没有 display 属性。尝试为所有 :after 伪元素设置一个 display: block;。这应该可以解决 Safari 的问题。