css实现div内文字自动滚动

网上找了好久，终于找到了个能实现的，把它整理一下。
需求：表格内字体过长实现自动滚动
实现思路如下：
html：

<div class="item-column" style="background: rgb(12, 87, 154); width: 18%; height: 60px; line-height: 60px;"><p class="scrollDiv">让我更热个热更热个人人人歌更让人热啊隔热个人</p></div>

css:

.item-column {
  height: 200px;
  width: 300px;
  overflow:hidden;
}

.item-column>p {
    white-space: nowrap; //设置不换行
}

.scrollDiv {
    position: relative;
    animation: scroll 30s infinite linear; //滚动速度，值越大越慢
}

@keyframes scroll {
	//滚动范围
    0% { left: 5%; }
    100% { left: -100%; }
}

js:

//根据class获取所有的集合,然后遍历判断实际内容长度是否大于可视区域，是的话就加上带滚动效果的class
 var itemColumns = document.getElementsByClassName("item-column");
                for (let i = 0; i < itemColumns.length; i++) {
                    var column = itemColumns[i];
                    if (column.scrollWidth > column.clientWidth) {
                        var scrollColum = column;
                        var d = column.scrollWidth - column.clientWidth;
                    	$(column).find("p").addClass("scrollDiv");
                    }
                }

效果图：