前端页面新闻列表加New动画

HTML:
<ul class="news-list">
    <li class="news-item font-18">
        <a href="" target="_blank" title="点击查看详情" class="news-item-content">
            热烈祝贺中华人民共和国成立75周年！！！
        </a>
        <span class="news-item-date">{{ForMatDate($data->publishtime)}}</span>
        <sup class="blink hidden-xs" >New</sup>
    </li>
</ul>



CSS:
/* ----- NEW 动画 ----- */
/* 定义keyframe动画，命名为blink */

@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 添加兼容性前缀 */
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.blink {
    color: red;
    font-size:15px;
    font-weight: bolder;
    white-space: nowrap;
    animation: blink 1s linear infinite;
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
    /*position: absolute;*/
    /*right: -25px;*/
    /*top: -18px;*/
}

/* 当屏幕小于768时，元素自动隐藏（执行大括号里的内容） */
@media screen and (max-width: 768px) {
    .hidden-xs{
        display: none;
    }
}

 

2.列表内容中多余部分变成省略号的CSS样式

.xydt_list{
            display: inline-block;
            width: 75%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: top;
        }