Dro*_*gon 2 html css animation css-animations
我正在玩一些动画,但它根本不起作用.它必须是一个反弹动画.这是我第一次使用它.所以我希望我不犯错误
这是我的.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;
}
| 归档时间： |
|
| 查看次数： |
9020 次 |
| 最近记录： |