Question

我对我放在我网站上的图片有问题就是我所做的。

    #mysecond
    {
    width:100px;
    height:100px;
    background:none;
    position:relative;
    animation:mysecond 5s;
    -webkit-animation:mysecond 5s; /* Safari and Chrome */ 
    -moz-animation    : mysecond 5s;
    -o-animation      : mysecond 5s;
    animation         : mysecond 5s;
    }
    @keyframes mysecond 
    {
    from {
    transform : scale(1.5);
    opacity   : 1;
    }
    to {
    transform : scale(0);
    opacity   : .0;
    }
    }
    @-webkit-keyframes {
    from {
    transform : scale(1.5);
    opacity   : 1;
    }
    to {
    transform : scale(0);
    opacity   : .0;
    }
    }
    @-moz-keyframes {
    from {
    transform : scale(1.5);
    opacity   : 1;
    }
    to {
    transform : scale(0);
    opacity   : .0;
    }
    }

毕竟这个我的游戏计划是让图像缩放并消失，相反它确实缩放并消失但是在5秒之后它回来了任何想法我做错了什么？

Answer 1

在开头设置结束状态。

#mysecond{
 width:100px;
 height:100px;
 background:none;
 position:relative;
 -webkit-animation:mysecond 5s;
 /*missing*/
 -webkit-transform:scale(0);
 opacity:0;
}

<强>演示

http://jsfiddle.net/agj7z/2/

BTW如果你想在活动结束后隐藏它，你需要更改课程：

2秒后隐藏

JS

window.setTimeout(function(){
 document.getElementById('mysecond').classList.add('hide');
},2000);

CSS

#mysecond{
 width:100px;
 height:100px;
 background-color:red;
 -webkit-transform:scale(1);
 opacity:1;
}

#mysecond.hide{
 -webkit-animation:mysecond 5s;
 -webkit-transform:scale(0);
 opacity:0;
}

@-webkit-keyframes mysecond{
 0%{
  -webkit-transform:scale(1);
  opacity:1;
 }
 100%{
  -webkit-transform:scale(0);
  opacity:0;
 }
}

<强>演示

http://jsfiddle.net/agj7z/3/

如果您有任何问题，请询问。

我不希望我的图像在应用样式后回来

1 个答案: