CSS3로 이전 marquee태그 표현하기

HTML5부터는 비추천(폐지?)가 된, 지금에 와선 그립기도 한 <marquee>태그.
요소 안에 있는 글자를 흐르는 글자로 표현하는 이 태그는 한동안 사라지는가 싶었지만, 최근에는 한줄 뉴스를 표현하는 등으로 웹, 스마트폰 등에서 이용되기도 합니다.
<marquee>태그를 사용할 수 없게 되어, 같은 움직임을 JavaScript를 이용해서 실행하기도 하는데, CSS3로 marquee를 표현하는 방법을 소개합니다. 이 방법으로 대부분의 브라우저에 대응합니다.

See the Pen Marquee CSS by nanati (@nanati) on CodePen.

HTML

<div class="marquee">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

옆으로 흐르게끔 하고 싶은 요소를 「marquee」라는 클래스명을 준 박스로 감쌉니다.

CSS3

.marquee {
  width:600px;
  padding:0.5em 0;
  overflow:hidden;
  background-color:#f6f6f6;
  margin-bottom:10px;
  position:relative;
}

.marquee p:after {
  content:"";
  white-space:nowrap;
  padding-right:50px;
}

.marquee p {
  margin:0;
  padding-left:600px;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

움직이고 싶은 감싸진 요소의 「padding-left」수치를「.marquee」의 가로폭과 같은 사이즈로, 또는 조금 더 큰 사이즈로 지정해 주는 것이 하나의 포인트 되겠습니다.
그리고 animation와 translate를 각각 지정하여 부드러운 움직임을 연출합니다.