HTML only Marquee animation using inline css only and @keyframes

Question

I'm using an email platform (Listrak) that only allows inline CSS in the email-design.

I made a simple scrolling marquee using inline css.

But now I'm stuck on where to put the @keyframes css?

I can't use tags. Everything has to be inline css.

@keyframes marquee {
  0% {
    left: 0px;
  }
  100% {
    left: -336px;
  }
}

<div style="display:flex;
  width:600px;
  height: 50px;
  overflow: hidden;
  line-height: auto;
  background-color:#1892a0;">

  <div style="display:flex;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    top: 10px;
    left: 100%;
    justify-content:round;
    font-family: 'TriviaSlabBook', Arial, Helvetica, sans-serif;
    font-size:32px;
    font-weight:bold;
    color:white;
    animation: marquee 3s linear infinite;">

    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
  </div>
</div>

you cannot inline a keyframes. Use a GIF image for animation inside email — Temani Afif, Mar 20 '23 at 15:27
you cannot and even if you can it will never work as you want. CSS in email is very limited — Temani Afif, Mar 20 '23 at 15:31
You might try the old and deprecated [`marquee` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee). It still works in browsers, but I honestly don't remember if it ever worked in any email clients. — jme11, Mar 20 '23 at 15:42
it won't work in [most clients](https://www.campaignmonitor.com/resources/guides/css-animation-in-email-keyframes-transitions-and-sample-code/#one), and if you can only inline css then you won't be able to make it work even for the supported clients. — LS_, Mar 20 '23 at 15:49
[Here you see all email clients that support this](https://www.caniemail.com/search/?s=animation) You can also adapt the search to see what is supported for other ideas you have. gif will work everywhere (where images are allowed) .Otherwise stick to a simple design, this won't work. — cloned, Mar 21 '23 at 07:19

score 0 · Answer 1 · answered Mar 20 '23 at 17:09

The same with the deprecated marquee tag:

<div style="display:flex;
  width:600px;
  height: 50px;
  overflow: hidden;
  line-height: auto;
  background-color:#1892a0;">

  <marquee style="display:flex;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    top: 10px;
    left: 0%;
    justify-content:round;
    font-family: 'TriviaSlabBook', Arial, Helvetica, sans-serif;
    font-size:32px;
    font-weight:bold;
    color:white;">

    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
  </marquee>
</div>

Not an acceptable solution. I need to control speed and (sometimes use ease-in-out) the text can't have a blank gap. It needs to loop infinitely without the blank gap. — CharlesNYC, Mar 20 '23 at 17:27

score 0 · Answer 2 · answered Mar 20 '23 at 19:34

0

I think email clients do not support the @keyframes css tag. Unless someone has a workaround, I'll consider this issue closed.

answered Mar 20 '23 at 19:34

CharlesNYC

13
1
1
9

HTML only Marquee animation using inline css only and @keyframes

2 Answers2