Menu
everyone i want to get a simple text-wipe effect using only CSS and HTML, I have a code its very simple.
my goal is, the text won't resize when the textbox will shrink, and that's how I want to achieve this type of text wipe effect. please note I need a totally transparent background because I want to use it as a sub alert for twitch.
is there any option that the text sill stay at the fixed position(right side), and when the textbox wipes it from left to right.
.containner{
width: 200px;
height: 150px;
background-color:green;
overflow: hidden;
position: relative;
}
.innercon{
right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/
}
@keyframes animaitonx{
from{
width: 200px;
}
to{
width:0px;
}
}
#copy{
position: static;
}
.texttHolder{
width:200px;
text-align: right;
color:red
}<body onload="mainx()">
<div id="containner" class="containner">
<div class="innercon">
<div class="texttHolder" id="copy">
here is your text
</div>
<div id="paste">
</div>
</div>
</div>
</body>
466
asked Nov 19 '25 04:11
A simple mask effect can do it:
h1 {
color: #fff;
display: table;
margin: 50px auto;
font-family: sans-serif;
font-size: 60px;
-webkit-mask-image: linear-gradient(to right, transparent 40%, #fff 60%);
-webkit-mask-position: right;
-webkit-mask-size: 250% 100%;
animation: hide 2s linear forwards;
}
h1.opposite {
-webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 60%);
animation-direction: reverse;
}
@keyframes hide {
to {
-webkit-mask-position: left;
}
}
body {
background: linear-gradient(to right, red, green);
}<h1>A sample text</h1>
<h1 class="opposite">A sample text</h1>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
