I am trying to create a CSS animation where a longer string of internal link scrolls from the first letter to the last inside a narrower container. If I boil down the HTML and CSS a bit, they would look like:
<div class='outer-container'>
...
<span class='container long-text-scroll'>
[[Link|A long string of descriptions]]
</span>
</div>
/*.outer-container has position:relative*/
...
.container {
position: absolute;
right: 0;
bottom: 18px;
width: 60px;
height: 16px;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
@keyframes long-text-scroll {
0% {opacity:1;transform:translate(0,0);}
75% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
85% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
87% {opacity:0;transform:translate(-100%,0) translate(60px,0);}
88% {opacity:0;transform:translate(0,0);}
90% {opacity:1;transform:translate(0,0);}
99% {opacity:0;transform:translate(-100%,0) rotate(45deg);}
}
.outer-container .long-text-scroll>a {
position: absolute;
top: 0;
left: 0;
animation-name: long-text-scroll;
animation-duration: 6s;
animation-timing-function: cubic-bezier(0.15, 0, 0.85, 1);
animation-iteration-count: infinite;
}
This style is applied to multiple instances of texts where they are longer than 60px. I believe that for the first-to-last-letter effect, I must use multiple translate
functions in the same transform function: the -100%
to align the end of text to the left edge, the +60px
to move the end back to the right edge. The animation keyframe can only be defined in a style sheet, so I can't use inline definitions; Perhaps I can ask my SysOp to use widget, but that is not ideal.
Thanks in advance for any suggestions.