css3 Keyframes mit weebly

Question

Ich habe den folgenden Code:

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> 

Gerade jetzt die Animationen starten 2s nach dem Laden der Seite, und ich möchte, dass sie entweder starten, wenn das Element durch den Benutzer sichtbar ist oder wenn der Die Maus befindet sich über einem Element. Vorzugsweise die erste.

Die Sache ist, ich benutze Weebly und es ist ein wenig schwierig, jquery und dieses Zeug hinzuzufügen. Gibt es einen einfacheren Weg dies zu tun?

Vielen Dank!

Answer 1

Ich habe es geschafft, dies mit http://jackonthe.net/css3animateit/, es ist so einfach wie das Importieren der Abhängigkeiten in den Code-Schnipsel in Weebly und fügen Sie dann die Klasse wie es auf der Webseite erklärt wird.

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