定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用animation-name引用），然后是一组样式规则（用大括号分隔）。然后，通过使用标识符作为“animation-name”属性的值，将动画应用于元素。
语法：
animation-name： 这是必需的，它定义动画名称。
keyframes-selector： 定义动画的百分比，它介于0％到100％之间。一个动画可以包含许多选择器。
在大括号内，定义关键帧或路径点，这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如，一个简单的动画@keyframe可能如下所示：
0%”和“100%”是关键帧选择器，每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。
还可以使用选择器关键字from和to，而不是分别使用0%和100%，因为它们是等价的。
关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意，百分比单位说明符必须用于百分比值。因此，' 0 '是一个无效的关键帧选择器。
注意：为了获得浏览器的最佳支持，请始终指定0％和100％选择器。
示例1：
效果图：
示例2：
效果图：
更多 web前端开发 知识，请查阅 HTML中文网 ！！
两个animation的类名调用，相当于你这个标签中同时出现了animation属性，那么应该就是会后面一个className覆盖了前面一个className中的animation，所以，你看到的就是一个动画效果。如果你希望两个效果是同时存在的话，那么你可以在一个keyframes中把动画效果都写上，比如你的neon2这个类是from、to的形式，而shake-horizontal是从0到100的形式，那么就结合一下，都用0到100的形式来处理，放在一个className中。
如果是有先后顺序，后面可能会用到其中一个，而你又不想重写，只是想临时调用的话，那么就只有通过setTimeout的方式，在第一个animation结束之后把这个className给remove了，同时再addClass第二个动画效果进来。
