Question 43739 in Html Question posted in
Some basic documentation can be found here.

HTML only Marquee animation using inline css only and @keyframes

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search