So im tring to do an animation like a marquee
like so
my code dont work as i wont
<code>.scrolling-text {
display: inline-block;
animation: scroll-text 10s linear infinite;
}
@keyframes scroll-text {
0% {
transform: translateX(0%);
}
80% {
transform: translateX(calc(-100% + 300px)); /* Adjust 300px to the container width */
}
90% {
transform: translateX(calc(-100% + 300px)); /* Pause */
}
100% {
transform: translateX(0%);
}
</code>
<code>.scrolling-text {
display: inline-block;
animation: scroll-text 10s linear infinite;
}
@keyframes scroll-text {
0% {
transform: translateX(0%);
}
80% {
transform: translateX(calc(-100% + 300px)); /* Adjust 300px to the container width */
}
90% {
transform: translateX(calc(-100% + 300px)); /* Pause */
}
100% {
transform: translateX(0%);
}
</code>
.scrolling-text {
display: inline-block;
animation: scroll-text 10s linear infinite;
}
@keyframes scroll-text {
0% {
transform: translateX(0%);
}
80% {
transform: translateX(calc(-100% + 300px)); /* Adjust 300px to the container width */
}
90% {
transform: translateX(calc(-100% + 300px)); /* Pause */
}
100% {
transform: translateX(0%);
}
New contributor
Ciccio Gamer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.