CSS3关键帧与weebly

Question

我有以下代码：在页面加载后

div.slide-right { 
    width:100%; 
    overflow:hidden; 
} 

div.slide-right { 
animation: 2s slide-right; 
} 

@keyframes slide-right { 
    from { 
    margin-left: -100%; 
    width: 100%; 
    } 

    to { 
    margin-left: 0%; 
    width: 100%; 
    } 
} 
</style> 

眼下动画开始2秒，我要开始他们要么当元素是由用户或当visible鼠标在某个元素上。最好是第一个。

事情是我使用Weebly，这是一个有点难以添加jQuery和这个东西。有没有更简单的方法来做到这一点？

非常感谢！

Answer 1

我设法使用http://jackonthe.net/css3animateit/来做到这一点，就像在Weebly的代码片段中导入依赖关系一样简单，然后像在网页中解释的那样添加类。

<div class='animatedParent'> 
    <h2 class='animated bounceInDown'>It Works!</h2> 
</div>