css做的网页平滑过渡效果，听了老师的课程三遍，看着代码也是一模一样的，就是没有效果出来

Question

.st-panel h2{color:#e23a6e; font-size:50px; position:absolute; left:50%; line-height:50px; font-weight:800; text-align:center; top:50%; margin:-150px 0px 0px -100px; text-shadow:1px 1px 1px rgba(151,24,64,0.2);-webkit-backface-visibility:hidden;}#st-control-1:checked ~ .st - scroll #st-panel-1 h2,#st-control-2:checked ~ .st - scroll #st-panel-2 h2,#st-control-3:checked ~ .st - scroll #st-panel-3 h2,#st-control-4:checked ~ .st - scroll #st-panel-4 h2,#st-control-5:checked ~ .st - scroll #st-panel-5 h2{    -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;    -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;    -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;    -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;    animation:moveDown 0.6s ease-in-out 0.2s backwards;}@-webkit-keyframes moveDown{    0% {        -webkit-transform:translateY(-40px);        opacity:0;    }    100%{        -webkit-transform:translateY(0px);        opacity:1;    }}@-moz-keyframes moveDown{    0% {        -moz-transform:translateY(-40px);        opacity:0;    }    100%{        -moz-transform:translateY(0px);        opacity:1;    }}@-ms-keyframes moveDown{    0% {        -ms-transform:translateY(-40px);        opacity:0;    }    100%{        -ms-transform:translateY(0px);        opacity:1;    }}@-o-keyframes moveDown{    0% {        -o-transform:translateY(-40px);        opacity:0;    }    100%{        -o-transform:translateY(0px);        opacity:1;    }}@keyframes moveDown{    0% {        transform:translateY(-40px);        opacity:0;    }    100%{        transform:translateY(0px);        opacity:1;    }}.st-panel p{font-size:16px; text-align:center; line-height:22px; width:50%; position:absolute; top:35%; left:25%; padding:0;-webkit-backface-visibility:hidden;}#st-control-1:checked ~ .st-scroll #st-panel-1 p#st-control-2:checked ~ .st-scroll #st-panel-2 p#st-control-3:checked ~ .st-scroll #st-panel-3 p#st-control-4:checked ~ .st-scroll #st-panel-4 p#st-control-5:checked ~ .st-scroll #st-panel-5 p{-webkit-animation:moveUp 2.6s ease-in-out 0.6s backwards;-moz-animation:moveUp 2.6s ease-in-out 0.6s backwards;-ms-animation:moveUp 2.6s ease-in-out 0.6s backwards;-o-animation:moveUp 2.6s ease-in-out 0.6s backwards;animation:moveUp 2.6s ease-in-out 0.6s backwards;}@-webkit-keyframes moveUp{    0%{        -webkit-transform:translateY(40px);        opacity:0;    }        100%{        -webkit-transform:translateY(0px);        opacity:1;    }}@-moz-keyframes moveUp{    0%{        -moz-transform:translateY(40px);        opacity:0;    }        100%{        -moz-transform:translateY(0px);        opacity:1;    }}@-ms-keyframes moveUp{    0%{        -ms-transform:translateY(40px);        opacity:0;    }        100%{        -ms-transform:translateY(0px);        opacity:1;    }}@-o-keyframes moveUp{    0%{        -o-transform:translateY(40px);        opacity:0;    }        100%{        -o-transform:translateY(0px);        opacity:1;    }}@keyframes moveUp{    0%{        transform:translateY(40px);        opacity:0;    }        100%{        transform:translateY(0px);        opacity:1;    }}这是CSS代码，但是文字没效果，那位大神帮我一下，感激不尽

Answer 1

<div class="st-scroll">
            <section class="st-panel" id="st-panel-1">
                <div class="st-desc" data-icon="H"></div>
                <h2>Serendipity</h2>
                <p>Every woman deserves to shine in this world, inside and out. Don’t let anything         
                    or anyone let you doubt how beautiful you are because you are a gem like no other.                              </p>
            </section>
            <section class="st-panel" id="st-panel-2">
                <div class="st-desc" data-icon="2"></div>
                <h2>Happiness</h2>
                <p>Every woman deserves to shine in this world, inside and out. Don’t let anything         
                    or anyone let you doubt how beautiful you are because you are a gem like no other.                              </p>
            </section>
            <section class="st-panel" id="st-panel-3">
                <div class="st-desc" data-icon="B"></div>
                <h2>tranquillity</h2>
                <p>Every woman deserves to shine in this world, inside and out. Don’t let anything         
                    or anyone let you doubt how beautiful you are because you are a gem like no other.                              </p>
            </section>
            <section class="st-panel" id="st-panel-4">
                <div class="st-desc" data-icon="x"></div>
                <h2>positivity</h2>
                <p>Every woman deserves to shine in this world, inside and out. Don’t let anything         
                    or anyone let you doubt how beautiful you are because you are a gem like no other.                              </p>
            </section>
            <section class="st-panel" id="st-panel-5">
                <div class="st-desc" data-icon="C"></div>
                <h2>Serendipity</h2>
                <p>Every woman deserves to shine in this world, inside and out. Don’t let anything         
                    or anyone let you doubt how beautiful you are because you are a gem like no other.                              </p>
            </section>
            
            </div>

HTML代码