我正在播放一些动画，但它根本不起作用。 它必须是弹跳动画。这是我第一次使用它。所以我希望我不会犯非常严重的错误
这是我的 .html 文件:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="logo"><img src="Header_red.png"/></div>
<div class="intro"><p>some text</p></div>
</body>
</html>
这是我的 .css 文件:
html{
background: url(background.jpg) no-repeat center center fixed;
overflow:hidden;
}
.logo
{
text-align:center;
margin-left:auto;
margin-right:auto;
animation-delay:1.2s;
animation-duration:4.8s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
.intro{
text-align:left;
margin-left:100px;
margin-right:auto;
animation-duration:5.5s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
@keyframes logo {
0%{transform:
translate(000px, 1500px);}
20%
{
transform:translate(000px, 235px);
}
25%
{
transform:translate(000px, 265px);
}
65%
{
transform:translate(000px, 265px);
}
100%
{
transform:translate(000px, -300px);
}
}
@keyframes intro{
0% {transform:
translate(000px, -400px);}
65% {transform:
translate(000px, -165px);}
100% {transform:
translate(000px, -135px);}
}
我希望有人能帮助我! 谢谢!
最佳答案
您需要为浏览器支持添加前缀:
关键帧 CSS
@keyframes logo
{
//animate
}
@-moz-keyframes logo /* Firefox */
{
//animate
}
@-webkit-keyframes logo /* Safari and Chrome */
{
//animate
}
@-o-keyframes logo /* Opera */
{
//animate
}
@-ms-keyframes logo /* IE */
{
//animate
}
元素 CSS
animation: value;
-moz-animation: value; /* Firefox */
-webkit-animation: value; /* Safari and Chrome */
-o-animation: value; /* Opera */
-ms-animation: value; /* IE */
如果您使用的是 CSS 编译器，例如 SCSS 或 LESS，您可以为上述内容创建一个 mixin:
@mixin animate($val){
animation:$val;
-moz-animation:$val;
-webkit-animation:$val;
-o-animation:$val;
-ms-animation:$val;
}
关于html - html css中的关键帧动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19860400/