CSS3 fadein动画实现遇问题，请求技术协助

你的问题核心在于：只给元素绑定了fadein动画名称，但没定义这个动画的关键帧规则，浏览器不知道该动画要执行什么效果，自然无法正常运行。

修正后的完整代码 #

CSS部分

/* 先定义fadein动画的关键帧（兼容主流浏览器前缀） */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cuv h5 {
  font-size: 25px; 
  animation: fadein 1.5s;
  -moz-animation: fadein 1.5s; 
  -webkit-animation: fadein 1.5s; 
  -o-animation: fadein 1.5s; 
}

HTML部分

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="cuv">
    <div class="content">
        <div class="container">
            <div class="row">
                <h5>Help Me</h5>
            </div>
        </div> 
    </div> 
</section>

重要说明 #

• @keyframes是CSS动画的核心，必须通过它定义动画的起始（from）和结束（to）状态，这里设置的是从完全透明到完全可见的过渡。
• 你之前写的不同前缀动画时长不一致（1.5s和2s），建议统一成相同值，避免不同浏览器下的表现差异。

内容的提问来源于stack exchange，提问作者Noi Keomany