JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<ol>
<li>从时间函数开始</li>
<li>如何制作逐帧动画x2：old-school / new-age</li>
<li>tricks：时延与入场效果</li>
<li>tricks：上升沿/下降沿</li>
<li>tricks：周期与“呼吸感”</li>
<li>难题：动画原子性</li>
<li>难题：声画同步</li>
<li>复用：jQM的动画复用方法</li>
<li>福利：动画工具盒</li>
</ol>

CSS

ol { color: #ED5276; padding: 0; margin: 0; line-height: 2; cursor: pointer; counter-reset:sectioncounter; list-style-type:none; overflow: hidden; border: 1px dashed ; }
ol:before { content: "hover me" ; display:block; visibility: visible; text-align: center; margin: 0 0 -2em; }
ol:hover:before { visibility: hidden; }

li { opacity: 0 ; -webkit-transform: translate(10%); transform: translate(50%); counter-increment:count; -webkit-transition: opacity .2s, -webkit-transform .2s steps(1) ; transition: opacity .2s, transform .2s steps(1) ; }
li:before { content: counter(count) "."; }
ol:hover li { opacity: 1; -webkit-transform: translate(0); transform: translate(0); transition: all .2s; }

JavaScript

var str = "" ,
    length = document.getElementsByTagName("li").length ;
for( var i = 0 ; i < length ; i ++ ) {
    str += "ol:hover li:nth-of-type(" + (i+1) + "){transition-delay:" + (i*9) + "ms}" ;
}
var st = document.createElement("style") ;
st.innerHTML = str ;
document.body.appendChild(st) ;