css 实现横向循环滚动文字

实现效果

// jsx
import React from 'react';
import classes from 'classnames';
import iconLoudspeaker from '../../assets/icon-loudspeaker.png';
import styles from './index.module.scss';

const NotificationBar = ({
  notifications = [],
  icon,
  className,
  imageWrapperClassName,
  notificationClassName,
  ...restProps
}) => {
  return (
    <div className={classes(styles.notificationBar, className)} {...restProps}>
      <div className={classes(styles.imageWrapper, imageWrapperClassName)}>
        <img src={iconLoudspeaker} alt="" />
      </div>
      <div className={styles.container}>
        {notifications.map((notification) => (
          <div className={classes(styles.notification, notificationClassName)}>
            {notification}
          </div>
        ))}
      </div>
    </div>
  );
};

export default NotificationBar;

.notificationBar {
  width: 100%;
  height: 26px;
  background-color: #FFF4E5;
  display: flex;
  align-items: center;
  position: relative;

  .imageWrapper {
    height: 26px;
    position: absolute;
    display: flex;
    align-items: center;
    left: 0;
    z-index: 1;
    background-color: #FFF4E5;
    padding-left: 11px;
    padding-right: 6px;

    img {
      width: 14px;
    }
  }

  .container {
    height: 26px;
    position: relative;
    overflow-x: hidden;
    display: flex;
    align-items: center;


    .notification {
      padding-left: 20px;
      padding-right: 60px;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: var(--text-color-orange);
      display: inline-block;
      white-space: nowrap;
      animation: 15s wordsLoop linear infinite normal;
    }
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}