如何让将一段话分成三段循环淡入淡出

需求描述

将一段话分成三段，第一段显示后隐藏后接着第二段显示隐藏接着第三段，第一段…一直循环，要求每次显示隐藏时文字要淡入淡出。参考：https://www.cnblogs.com/wangshengli520/p/9899703.html

思路

将淡入淡出的动画效果写在一个类中，然后通过js添加移除这个类来实现

代码

• CSS代码

@keyframes txt-fade {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: 1; /*中间状态 透明度为1*/
    }
    100% {
        opacity: 0; /*结尾状态 透明度为0*/
    }
}
.slider_text_one{
    opacity: 0;/**设置默认三段都不显示/
}
.fade {
    opacity: 0;
 	animation-name: txt-fade; /*动画名称*/
    animation-duration: 3s; /*动画持续时间*/
}

• HTML代码

<div class="slider_text_one txt-one">
	<div class="container">
		<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
			<h2>晨豪是一家致力于通过提供高品质的安全服务，</h2>
			<h2>为中国的城市和建筑解决遇到的各种安全问题的高新技术企			业。</h2>
		</div>
	</div>
</div>
<div class="slider_text_one txt-two">
	<div class="container">
		<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
			<h2>我们开发了适用于国家级的技术领先的建筑安全体系，</h2>
			<h2>全方位保护国家、城市和建筑的安全。</h2>
		</div>
	</div>
</div>
<div class="slider_text_one txt-three">
	<div class="container">
		<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
			<h2>帮助建筑与城市运营的管理者挖掘更多的价值，</h2>
			<h2>提升安全、提高效率、降低成本、优化管理。</h2>
		</div>
	</div>
</div>

• JS代码

//获取dom节点
var txtOne=document.querySelector('.txt-one');
var txtTwo=document.querySelector('.txt-two');
var txtThree=document.querySelector('.txt-three');
//页面载入时，给txtOne加入动画，执行一次
txtOne.classList.add('fade');
//监听txt-one动画是否结束
txtOne.addEventListener('animationend',function(){
	//动画结束，移除txtOne动画的样式类后，txtOne恢复默认
	txtOne.classList.remove('fade');
	//给txtTwo加上动画
	txtTwo.classList.add('fade');
})
txtTwo.addEventListener('animationend',function(){
	//动画结束，移除动画的样式类
	txtTwo.classList.remove('fade');
	txtThree.classList.add('fade');
})
txtThree.addEventListener('animationend',function(){
	//动画结束，移除动画的样式类
	txtThree.classList.remove('fade');
	txtOne.classList.add('fade');
})

补充

@keyframes、animation和addEventListener会有浏览器兼容问题
效果参考：https://www.bjchenhaokeji.com