114] 当然，在本发明实施例中，所述动画选择窗口中，除了 CSS动画名称，还包括其他 选项，比如动画时长、动画延时、动画循环次数等选项。其中动画时长为CSS动画执行一次 的总时长，动画延时为CSS动画在当前页面展示多长时间后开始展示，动画循环次数为动 画执行的次数。
[0115] 步骤130,在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所 述CSS动画的CSS代码。
[0116] 在本发明实施例中，在用户选择了一个CSS动画并确定之后，针对该CSS动画，通 过网页文档编辑器的修改接口，可直接针对网页文档编辑器中的html文档中，对应用户点 击的页面元素的位置，生成适配各种浏览器内核类型的CSS代码。然后用户可将网页文档 编辑器中的该最终的html文档导出，提供给服务器以发布到线上。
[0117] 比如前述示例⑷的html文档，其tab页面中，用户在class ="anim_title"的 div之上，选定了 myfirst的CSS动画，则将其CSS代码，如示例（6):
[0118] 示例（6):
[0119]
[0120] 加入到html代码中对应div的级联样式表中，得到最终的html代码，如示例（3)。
[0121] 当然，本发明实施例中，上述CSS代码可以采用内联样式表的形式添加到上述 html代码中，也可以外联样式表的形式添加到所述html代码中，本发明不对其加以限制。 其中，示例（3)为以内联级联样式表形式添加 CSS代码的示例。
[0122] 优选的，在所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置， 添加所述CSS动画的CSS代码之前，还包括：
[0123] 步骤131，在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动 画添加位置提示内容。
[0124] 即将示例（5)中的div标签之内的"此处添加动画"删除，然后以内联样式表的形 式添加上述CSS动画的CSS代码。
[0125] 本发明实施例可以对网页文档中包括了动画添加类标识的指定页面元素，在浏 览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动 画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进 行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代 码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文 档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行 修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的 代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通 过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。
[0126] 实施例二
[0127] 参照图2,其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以 包括：
[0128] 步骤210,加载待添加 CSS动画的网页文档，获得tab页面；所述网页文档中指定 的页面元素包括动画添加类标识和动画添加位置提示内容；
[0129] 如前述示例（5)所示的HTML代码：
[0130] <html>
[0131] 〈body〉
[0132] 〈div class ='，anim-title" >
[0133] 此处添加动画
[0134] </div>
[0135] 〈/body〉
[0136] </html>
[0137] 在本发明实施例中，用户可在网页文档编辑器中编辑上述html代码，然后浏览器 从网页文档编辑器中获取上述html代码，并进行加载，得到tab页面。如图ID所示。
[0138] 步骤220,在tab页面中，是否侦听到对应动画添加类标识的页面元素之上的触 发操作；如果在侦听到所述触发操作，则进入步骤230 ;
[0139] 如果未侦听到触发操作，则不进行后续处理。
[0140] 步骤230,启动动画选择窗口；
[0141] 当用户在图ID中点击"此处添加动画"，则浏览器判断接收到对应动画添加类标 识的页面元素之上的触发操作，启动动画选择窗口，如图2A，其中201为动画选择窗口。
[0142] 步骤240,通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示。
[0143] 用户可以在201左侧202的下拉菜单中选择其需要添加的CSS动画，当前选择的 是myfirst动画。
[0144] myfirst动画代码和运行过程如实施例一所述。
[0145] 优选的，通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示，包 括：
[0146] 子步骤241，在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包 括：动画时长、动画延时、动画循环次数其中至少一个。
[0147] 如图2A中，动画选择窗口还包括动画时长输入子窗口，动画延时输入子窗口、动 画循环次数输入子窗口，用户可以在上述窗口中输入相应的参数。如果都不输入，则按照系 统默认的参数执行。
[0148] 那么myfirst循环一次，则由图2B变到图2C，再由图2C变到图2B。
[0149] 优选的，通过所述动画选择窗口，从CSS动画库中添加一 CSS动画并渲染展示，包 括：
[0150] 子步骤242，针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相 应的CSS代码；
[0151] 在本发明实施例中对不同的浏览器内核，对某些CSS样式的支持也存在差异， 比如容器宽度在不同的浏览器中解释不同，比如说设置width :200px，在IE9下显示的是 200px，在FF浏览器、Chrome浏览器、Opera浏览器中显不的是220px 〇
[0152] 当然，本发明实施例中，针对不同的浏览器内核，可以预先设置各种类型的CSS 代码，即一个CSS动画，设置多套CSS代码，每套CSS代码对应一个或几个浏览器内核。
[0153] 比如W3C,在CSS3中定义在Okeyframes中仓ι|律.云力画。而在 Safari内核和 Chrome内核中，定义在@-webkit-keyframes中创建动画，其是在keyframes前加上前 缀-webkit-;在firfox内核中，定义在@-moz-keyframes中创建动画；在opera内核中，定 义在@-〇-keyframes中创建动画。
[0154] 那么此时，可根据当前浏览器内核类型，从CSS动画库中，选择相应的CSS代码。
[0155] 当然，本发明可在W3C标准代码之下，针对各个不同类型浏览器所支持的解析格 式，进行相应的转换。
[0156] 在本发明实施例中，CSS动画库中，针对每个动画可构造一套标准的CSS代码，如 采用W3C (World Wide Web Consortium，万维网联盟）标准预置一套标准CSS代码。然后 根据W3C标准代码与各个浏览器内核支持的代码格式，对代码中相应的字段进行转换，比 如前述Okeyframes，而当前浏览器为chorme内核，则将CSS代码中的Okeyframes转换成 @-webkit-keyframes 〇
[0157] 子步骤243,通过JS脚本将所述CSS代码，添加到当前tab页面内进行渲染展示。
[0158] 然后，即可调用JS脚本（JavaScript)，将适配当前浏览器内核解析的CSS代码，添 加到当前tab页面的中进行渲染展示。
[0159] 在实际应用中，将前述CSS代码的中的类名，修改为动画添加类标识，前述JS脚本 即可通知浏览器对该CSS代码直接进行渲染展示，无需重新刷新tab页面。
[0160] 步骤250,在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动 画添加位置提示内容；
[0161] 在删除了图2B和图2C中的"此处添加动画"内容之后，如果再运行，则CSS动画 中则不会有上述提示内容。
[0162] 步骤260,在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加 适配各种浏览器内核的所述CSS动画的CSS代码。
[0163] 比如前述示例⑷的html文档，其tab页面中，用户在class ="anim_title"的 div之上，选定了 myfirst的CSS动画，设定动画时长为5s，那么生成的适配各种浏览器内 核类型的CSS代码如示例（7):
[0164] 示例（7):
[0165]
[0167] 然后，将上述CSS代码以类似示例（3)的形式加到HTML相应的div标签内联样式 表中。