animation动画结束后css样式怎么保留最后状态

今天被问到个问题，动画结束后css状态会返回到初始状态，希望动画结束后css状态达到最后的模样。

为了达到这个效果，只需要在动画的元素上添加css样式：（animation-fill-mode:forwards）。

animation-fill-mode

语法

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

代码及效果：

CSS

.content1_desc p {
        opacity: 0;
    }
    
    .content1_desc p:nth-of-type(1) {
        /* opacity: 0; */
        animation: fade 1s ease;
        animation-fill-mode: forwards;
    }
    
    .content1_desc p:nth-of-type(2) {
        /* opacity: 0; */
        animation: fade 1s ease 1s;
        animation-fill-mode: forwards;
    }
    
    .content1_desc p:nth-of-type(3) {
        /* opacity: 0; */
        animation: fade 1s ease 2s;
        animation-fill-mode: forwards;
    }
    
    .content1_desc p:nth-of-type(4) {
        /* opacity: 0; */
        animation: fade 1s ease 3s;
        animation-fill-mode: forwards;
    }

 HTML

<div class="full-screen content1">
     <div class="content1_desc">
        <p>穿西装</p>
        <p>吃西餐</p>
        <p>精致的生活</p>
        <p>我都觉得无聊</p>
     </div>
</div>

效果：