Html 为什么 CSS3 动画不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41690340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why CSS3 Animation is not working?
提问by Morgari
Can someone help me to find out why animation on <h5>element doesn't work?
有人可以帮我找出为什么<h5>元素上的动画不起作用吗？
#hero h5 {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
font-weight: strong;
font-size: 28px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="hero">
<div class="content">
<div class="container">
<div class="row">
<h5>Lorem Ipsum Demo Title</h5>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section --> 回答by Mohammad Usman
You are calling fadeinanimation in your code but you haven't defined it anywhere.
您正在fadein代码中调用动画，但尚未在任何地方定义它。
CSS3 animations are defined with @keyframesrule. More Information about CSS3 animations is Here.
CSS3 动画是用@keyframes规则定义的。关于 CSS3 动画的更多信息在这里。
Add following css:
添加以下css：
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#hero h5 {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
font-weight: strong;
font-size: 28px;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
<div class="content">
<div class="container">
<div class="row">
<h5>Lorem Ipsum Demo Title</h5>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section --> 回答by Jatin Kalra
#hero h5 {
font-weight: strong;
font-size: 28px;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="hero">
<div class="content">
<div class="container">
<div class="row">
<h5 class="fade-in">Lorem Ipsum Demo Title</h5>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section -->
回答by UnUsuAL
You must define a animation named fadeIn- as shown below.
您必须定义一个名为fadeIn-的动画，如下所示。
Currently, you are using an animation but you have never created it.
目前，您正在使用动画，但您从未创建过它。
@keyframes fadeIn {
0% {
transform: translate(0,0)
}
30% {
transform: translate(5px,0)
}
55% {
transform: translate(0,0)
}
80% {
transform: translate(5px,0)
}
100% {
transform: translate(0,0)
}
}
