前端入坑紀 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! 如有錯漏，還請不吝賜教