The Wiki I edit is on MW 1.31.7 with plans to update to 1.35 in mid-year. Our sanitization interpreter seems to be rather out-of-date: transform:translateX(x);
is marked illegal – there is a workaround with translate(x,0)
, so we can still make do with it.
My main problem comes from transform:translate(x1,y1) translate(x2,y2);
being marked illegal – In fact, it appears that any combination of multiple transform functions inside the same transform property is considered illegal.
I hope this can be (or is already, considering our geriatric MW version) addressed in a newer version of TemplateStyles; in the mean time, I wonder if there is any workarounds I can try?
My particular use case...
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.