ARTICLE AD BOX
I am a total newbie with HTML/CSS and I am trying to learn how to better mask animated text. This is what the code output looks like right now:
I want the words that are not in line with the rest of the body text (the words being scrolled away from) are masked with the background / are the same color as the background (currently #F6F6F6). How do I accomplish this?
body {
font-size: 2em;
font-family: arial;
line-height: 1.2
}
.animation {
display: inline-block;
vertical-align: top;
text-align: relative;
border: none;
overflow: visible;
white-space: nowrap;
color: #f6f6f6;
position: relative;
}
.animation ul {
list-style: none;
padding: 0 .5ex;
margin: 0;
height: 1.2em;
}
.animation li {
position: relative;
animation: cycle-5-items 5s ease-in-out alternate infinite;
color: blue;
font-weight: bold;
}
.animation ul.mask {
color: black;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
@keyframes cycle-5-items {
0%,
10% {
transform: translateY(0%);
}
15%,
35% {
transform: translateY(-100%);
}
40%,
60% {
transform: translateY(-200%);
}
65%,
85% {
transform: translateY(-300%);
}
90%,
100% {
transform: translateY(-400%);
}
}
Remove hair on your
<div class="animation">
<ul class="mask">
<li>face</li>
<li>legs</li>
<li>bikini</li>
<li>brows</li>
<li>underarms</li>
</ul>
<ul>
<li>face</li>
<li>legs</li>
<li>bikini</li>
<li>brows</li>
<li>underarms</li>
</ul>
</div>
![How can I vertically align my HR within a DIV? [duplicate]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded)