超出部分显示省略号、CSS3动画--来回运动

超出部分显示省略号：

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

css3动画===》来回运动：

@keyframes walk{
    0%{
        position:absolute;
        left:0;
    }
    48%{
        position:absolute;
        transform:rotateY(0deg);
    }
    50%{
        position:absolute;
        left:28rem;
        transform:rotateY(180deg);
    }
    100%{
        position:absolute;
        left:0;
        transform:rotateY(180deg);
    }
}


&.walkthrough{
    animation-name:walk;
    animation-duration:8s;
    animation-timing-function:linear;
    animation-delay:0.5s;
    animation-iteration-count:infinite;
}

注意:

1.最初写的时候, 在 50%处设置了 rotateY(180deg) ，所以会在 0 -> 50%的时候缓动翻转。为了避免, 选择了使其在快到50%前都还是未翻转的状态。(48%处添加的css)

2.在50%处翻折过后, 返回的过程中又进行了一次翻折。折腾后发现, 最终状态 100% 也是需要写上图片状态