Animation Flip HTML5 and CSS3 Doubts - html

Question

I need do the next animation of text:
People dissapears like a flip effect David Walsh Flip Card Effect, and the effect faces every 2 seconds and it will be repeating, contents the text: "Robots", "Animals", "Things" for example, with the flip animation.
Any idea?
One example of flip cards is the next: Stackoverflow How to flip multiple divs using CSS?
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
.divi {
line-height: normal;
color: black;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
.div1 { /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */
animation: showup 7s forwards;
font-family:'Roboto';
font-weight:300;
font-size:28px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
}
.div2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
width: 0px;
animation: reveal 7s forwards;
animation-iteration-count: 1;
display: inline-block;
white-space: nowrap;
}
.div2 span {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
margin-left: -355px;
animation: slidein 7s forwards;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: auto;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
width: auto;
}
}
<div class="divi" align="center">
<div class="div1">Hello</div>
<div class="div2">
<span>People</span>
</div>
<div class="div3">
<span>Robots</span>
</div>
<div class="div4">
<span>Animals</span>
</div>
<div class="div5">
<span>Things</span>
</div>
</div>