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代码