旋转渐显效果

前端入坑纪 02

刚刚看到这个需求时，表示一脸的懵逼啊！什么鬼，这TM是JavaScript做的吧！然而，细细研究一番后，发现果然这不是JavaScript的锅，妥妥的Css啊。

OK，first things first！项目链接

HTML 结构

<p class="rotinOut">
    <span>我</span>
    <span>想</span>
    <span>静</span>
    <span>静</span>
</p>

关键 CSS 结构

p span {
    color:#00B9CC;
    opacity: 0;
}

p span:nth-child(1) {
    display: inline-block;
    animation: rotinOut1 6s ease-out infinite forwards
}

p span:nth-child(2) {
    display: inline-block;
    animation: rotinOut2 6s ease-out infinite forwards
}

p span:nth-child(3) {
    display: inline-block;
    animation: rotinOut3 6s ease-out infinite forwards
}

p span:nth-child(4) {
    display: inline-block;
    animation: rotinOut4 6s ease-out infinite forwards
}

@keyframes rotinOut1 {
    0% {
        opacity: 0;
        transform: rotateZ(0deg)
    }
    20%,
        90% {
        opacity: 1;
        transform: rotateZ(360deg)
    }
    100% {
        opacity: 0;
        transform: rotateZ(360deg)
    }
}

@keyframes rotinOut2 {
    0%,
        20% {
        opacity: 0;
        transform: rotateZ(0deg)
    }
    40%,
        90% {
        opacity: 1;
        transform: rotateZ(360deg)
    }
    100% {
        opacity: 0;
        transform: rotateZ(360deg)
    }
}

@keyframes rotinOut3 {
    0%,
        40% {
        opacity: 0;
        transform: rotateZ(0deg)
    }
    60%,
        90% {
        opacity: 1;
        transform: rotateZ(360deg)
    }
    100% {
        opacity: 0;
        transform: rotateZ(360deg)
    }
}

@keyframes rotinOut4 {
    0%,
        60% {
        opacity: 0;
        transform: rotateZ(0deg)
    }
    80%,
        90% {
        opacity: 1;
        transform: rotateZ(360deg)
    }
    100% {
        opacity: 0;
        transform: rotateZ(360deg)
    }
}

css 原理解说

由于是逐一间隔时间出现，而且还得循环效果。效果的重点就在时间差和循环上，animation-delay的延时执行动画属性只有第一次进入或刷新页面才有效果，循环后就没作用了。
笔者参考了百度后，终于明白这其中的关键点还是在于keyframes 的进度安排，给予每个字在不同进度时的效果就可以实现了。
图示如下：

示意图

Ps:My skill's not better enough! 如有错漏，还请不吝赐教