动画CSS文本无法在Iphone上运行

Question

我有一个Wrapper，默认包含背景图片，标题文本和副标题文本。

检查一些教程我发现如何仅使用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>

有人能告诉我我的代码有什么问题吗？再次，在计算机和Android设备上工作得很好。我认为通过实现-webkit-animation可能会起作用，但仍然显示默认文本。我的意思是仍然显示内容：'';属性来自.headerWrapper：after和.subheaderWrapper：after

感谢您的时间！

Answer 1

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