Flowing announcement text Ver1

by hondana

HTML

<div class="b">
<p class="text">流れるお知らせテキストです</p>
</div>

CSS

div.b{
  background:#5e3500;
  width:100%;
  overflow : hidden;
  
}

.text{
  line-height : 1em;
  font-size:16px;
  margin-left:10px;
  color:#FFF;
  animation: flowing infinite;
	animation-duration: 15s;
  animation-fill-mode: forwards;
}

@keyframes flowing{
  0% {
      transform: translateX(-100%);
      opacity: 1;
    }
  20% {
    transform: translateX(0%);
    opacity: 1;
    }
  85% {
    transform: translateY(0%);
    opacity: 1;
    }
  95% {
    transform: translateY(-100%);
    opacity: 0;
    }
  100% {
    opacity: 0;
    }
}