css中@keyframes动画0.1%的作用（类似骨架屏文字渐现效果演示）

效果

实现

HTML

	<div class="title">Animation Demo</div>
	

SCSS

.title {

    position: relative;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    padding: 0px 20px;
    color: transparent;
    line-height: 30px;
    animation: title-in 1s .7s forwards;
    border-radius: 20px;
    overflow: hidden;
    
    &::before {
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transform-origin: left;
        background-color: #eee;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        animation: side-in-out 1s linear forwards;
    }
    
}

@keyframes side-in-out {
    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50.1% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0)
    }
}

@keyframes title-in {
    to {
        color: #000;
    }
}

注意在 50% 的动画处还是 transform-origin: left 左原点为基准的动画，而在下一个 0.1% 就瞬间切换为 transform-origin: right 右原点开始的动画，如果不做 0.1% 的突变，会导致在 50% 至 100% 范围内 transform-origin 原点渐渐由 left 转变为 right ，达不到我们预期的效果。