word swipe animation css

1<h4 class="wordCarousel">    
2        <span>Word swipe animation: </span>  
3        <div> 
4<!--        Use classes 2,3, or 4 to match the number of words --> 
5            <ul class="flip4"> 
6                <li>Oh My!</li>
7                <li>Swoosh</li>
8                <li>Cool</li> 
9                <li>Awesome</li>  
10            </ul>
11        </div>  
12    </h4>
13
14.wordCarousel {
15    font-size: 36px;
16    font-weight: 100;
17    color: #939393;
18    div {
19        overflow: hidden;
20        position: relative;
21        float: right;
22        height: 65px;
23        padding-top: 10px;
24        margin-top: -10px;
25        li {
26            font-family: Serif;
27            color: #ccc;
28            font-weight: 700;
29            padding: 0 10px;
30            height: 45px;
31            margin-bottom: 45px;
32            display: block;
33        }
34    }
35}
36
37.flip2 { animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
38.flip3 { animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
39.flip4 { animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
40
41@keyframes flip2 {
42    0% { margin-top: -180px; }
43    5% { margin-top: -90px;  }
44    50% { margin-top: -90px; }
45    55% { margin-top: 0px; }
46    99.99% { margin-top: 0px; }
47    100% { margin-top: -270px; }
48}
49
50@keyframes flip3 {
51    0% { margin-top: -270px; }
52    5% { margin-top: -180px; }
53    33% { margin-top: -180px; }
54    38% { margin-top: -90px; }
55    66% { margin-top: -90px; }
56    71% { margin-top: 0px; }
57    99.99% { margin-top: 0px; }
58    100% { margin-top: -270px; }
59}
60
61@keyframes flip4 {
62    0% { margin-top: -360px; }
63    5% { margin-top: -270px; }
64    25% { margin-top: -270px; }
65    30% { margin-top: -180px; }
66    50% { margin-top: -180px; }
67    55% { margin-top: -90px; }
68    75% { margin-top: -90px; }
69    80% { margin-top: 0px; }
70    99.99% { margin-top: 0px; }
71    100% { margin-top: -270px; }
72}
73
74// Layout //////////////////////////////////////////
75
76@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald);
77body,
78html {
79    width: 100%;
80    height: 100%;
81    margin: 0;
82    padding: 0;
83    overflow: hidden;
84}
85
86body {
87    font-family: "Roboto Condensed", cursive;
88    display: flex;
89    align-items: center;
90    justify-content: center;
91    background: #333;
92}
93

1<h4 class="wordCarousel">    
2        <span>Word swipe animation: </span>  
3        <div> 
4<!--        Use classes 2,3, or 4 to match the number of words --> 
5            <ul class="flip4"> 
6                <li>Oh My!</li>
7                <li>Swoosh</li>
8                <li>Cool</li> 
9                <li>Awesome</li>  
10            </ul>
11        </div>  
12    </h4>
13
14.wordCarousel {
15    font-size: 36px;
16    font-weight: 100;
17    color: #939393;
18    div {
19        overflow: hidden;
20        position: relative;
21        float: right;
22        height: 65px;
23        padding-top: 10px;
24        margin-top: -10px;
25        li {
26            font-family: Serif;
27            color: #ccc;
28            font-weight: 700;
29            padding: 0 10px;
30            height: 45px;
31            margin-bottom: 45px;
32            display: block;
33        }
34    }
35}
36
37.flip2 { animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
38.flip3 { animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
39.flip4 { animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
40
41@keyframes flip2 {
42    0% { margin-top: -180px; }
43    5% { margin-top: -90px;  }
44    50% { margin-top: -90px; }
45    55% { margin-top: 0px; }
46    99.99% { margin-top: 0px; }
47    100% { margin-top: -270px; }
48}
49
50@keyframes flip3 {
51    0% { margin-top: -270px; }
52    5% { margin-top: -180px; }
53    33% { margin-top: -180px; }
54    38% { margin-top: -90px; }
55    66% { margin-top: -90px; }
56    71% { margin-top: 0px; }
57    99.99% { margin-top: 0px; }
58    100% { margin-top: -270px; }
59}
60
61@keyframes flip4 {
62    0% { margin-top: -360px; }
63    5% { margin-top: -270px; }
64    25% { margin-top: -270px; }
65    30% { margin-top: -180px; }
66    50% { margin-top: -180px; }
67    55% { margin-top: -90px; }
68    75% { margin-top: -90px; }
69    80% { margin-top: 0px; }
70    99.99% { margin-top: 0px; }
71    100% { margin-top: -270px; }
72}
73
74// Layout //////////////////////////////////////////
75
76@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald);
77body,
78html {
79    width: 100%;
80    height: 100%;
81    margin: 0;
82    padding: 0;
83    overflow: hidden;
84}
85
86body {
87    font-family: "Roboto Condensed", cursive;
88    display: flex;
89    align-items: center;
90    justify-content: center;
91    background: #333;
92}
93