Css 我不想我的形象回来后，应用的风格

我有一个问题的形象，我放在我的网站这里是我所做的

    #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秒后，它回来了，我有什么想法我做错了吗？

在开始时设置结束状态

演示

顺便说一句，如果要在事件后隐藏类，则需要更改类：

2秒后隐藏

js

css

演示

如果你有任何问题，尽管问

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

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

#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;
 }
}