body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#news-ticker {
  background: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  overflow: hidden;
  position: relative;
  height: 30px;
  width: 500px; /* fixed width */
}

#news-content {
  position: absolute;
  white-space: nowrap;
  animation: slideIn 1s ease forwards;
  max-width: 400px; /* enforce width */
  overflow: hidden;
  text-overflow: ellipsis; /* show ... */
}

#news-content a {
  color: #00aced;
  text-decoration: none;
}

#news-content a:hover {
  text-decoration: underline;
}

@keyframes slideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}