CN105094804A - 在页面中添加动画的方法和装置 - Google Patents

Abstract

本发明公开了一种在页面中添加动画的方法和装置，涉及CSS动画技术领域。所述方法包括：加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。

Description

在页面中添加动画的方法和装置

技术领域

本发明涉及CSS动画技术领域，具体涉及一种在页面中添加动画的方法和装置。

背景技术

随着网页技术的发展，很多web网页开发者为了丰富网页中展示的内容，将很多动画在网页中进行展示。而基于浏览器内核对网页的解析原理，存在一种CSS(CascadingStyleSheets，级联样式表)动画。浏览器内核可将网页文档，如html(HypertextMarkupLanguage，超文本标记语言)文档，解析为DOM(DocumentObjectModel，文档对象模型)树和CSS文件，通过CSS文件对各个DOM节点的页面元素进行渲染。那么对于某个页面元素，如果在不同的时间下，在不同位置、形状等方面对其以CSS样式规定，那么该页面元素则会根据上述CSS样式，随着时间在不同位置、以不同形状进行渲染展示，即在tab页面中实现了动画效果。

但是，在先技术中，对于CSS动画，web网页开发者均需要在编辑器中预先对html文档的CSS文件进行编辑，如果想要知道CSS动画的效果，则需要切换到浏览器中，通过浏览器获取编辑后的html文档，然后刷新以预览CSS动画效果。

在上述过程中，由于web开发者不知道在编辑器中编辑完的CSS动画的效果具体如何，需要不断在浏览器和编辑器中来回切换，以编辑其最需要的CSS动画的CSS代码，其CSS动画的编写效率低，无法直观的在html文档中添加CSS代码。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在页面中添加动画的装置和相应的在页面中添加动画的方法。

依据本发明的一个方面，提供了一种在页面中添加动画的方法，包括：

加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

优选的，通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示，包括：

在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

如果在侦听到所述触发操作，则启动动画选择窗口；

通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

优选的，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

优选的，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

优选的，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：

在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

依据本发明的另外一个方面，本发明还公开了一种在页面中添加动画的装置，包括：

页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

动画实时展示模块，适于通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

优选的，所述动画实时展示模块，包括：

选择侦听模块，适于在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

界面启动模块，适于如果在侦听到所述触发操作，则启动动画选择窗口；

实时展示模块，适于通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

优选的，所述实时展示模块，包括：

第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

优选的，所述实时展示模块，包括：

属性信息确定模块，适于在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

优选的，编辑代码修改模块，包括：

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述编辑代码修改模块之前还包括：提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

根据本发明的在页面中添加动画的方法可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的一种在页面中添加动画的方法的流程示意图；

图1A、1B、1C为CSS动画的一种示例；

图1D示出了本发明待添加CSS动画的网页文档的tab页面一种示例；

图2示出了根据本发明一个实施例的一种在页面中添加动画的方法的流程示意图；

图2A示出了点击tab页面中指定的页面元素后弹出动画选择窗口的示例；

图2B和图2C示出了在动画选择窗口选择CSS动画渲染示例；

图3示出了根据本发明一个实施例的一种在页面中添加动画的装置的结构示意图；以及

图4示出了根据本发明一个实施例的一种在页面中添加动画的装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明实施例的核心思想之一在于：本发明实施例可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。

实施例一

参照图1，其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以包括：

步骤110，加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

在本发明实施例中，前述CSS动画是可以通过对目标元素的CSS样式的编写，比如不同时刻，目标元素在不同位置的不同形态的CSS样式，那么浏览器在渲染时，可以逐步渲染目标元素的样式，从而得到一个动画。

比如CSS文件的代码中，如下示例(1)为动画的目标元素：

示例(1):

div{

width:100px；

height:100px；

background:red；

position:relative；

animation:myfirst5s；

-webkit-animation:myfirst5s；

}

该目标元素的名称为myfirst，动画时长为5秒，其初始宽为100像素，初始高为100像素，背景为100，位置为相对body绝对定位relative。

如示例(2)，该目标元素的运动代码为:

示例(2):

其表示，从0时刻，位置为left:0px(距网页左侧的距离)，top:0px(距网页顶部的距离)，background(背景)为red的目标元素；

在总时间长度的50％中，逐步移动到left:200px，top:200px位置，并且背景颜色逐渐变化到blue；然后在剩余的50％时间中，从left:200px，top:200px位置逐步移动到left:0px，top:0px，并且背景从blue逐渐变到red。

那么，在实际的实现过程中，假使网页就一个div结构，如示例(3)，其伪代码如下：

示例(3)：

该CSS动画在tab页面中的实现过程如图1A、1B和1C。图1A的浏览器101的tab标签下的tab页面102中，展示了上述HTML文档的CSS动画的执行过程，该tab页面打开之后，0秒时，目标元素的width:100px和height:100px，在left:0px；top:0px位置，并且背景为red；然后目标元素向逐步右下移动，在5秒的50％时刻，移动到图1C，并且目标元素的背景变为blue，其中图1B是图1A移动到图1C的中间一帧图。然后从50％时刻开始，从图1C向右上移动，在100％时刻，目标元素又到图1A的位置，背景变为red。其中图1B是图1C移动到图1A的中间一帧图。

然而，在本发明实施例中，web网页开发者可以在网页文档编辑器中先编辑网页文档，但是对于需要编辑CSS动画的页面元素，可以预先在相应的页面元素位置添加动画添加类标识，在相应的页面元素位置并不写入具体的CSS代码，比如前述目标元素和相应的运动代码。那么本发明的浏览器可以获取该不包括具体CSS动画的、但是需要添加CSS动画的html文档，在浏览器的tab页面中渲染展示。然后进入步骤120。

其中，在本发明实施例中，所述html文档为静态页面文档。

其中，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

即本发明对于将要添加CSS动画的页面元素，在其div标签中添加动画添加类标识。

以前述html代码的例子为例，得到本发明实施例的待添加CSS动画的html代码如示例(4)：

示例(4)：

<html>

<body>

<divclass＝”anim-title”>

</div>

</body>

</html>

在本发明实施例中，动画添加类标识为以“anim-”为头部的类名，即在div标签中，其class属性中，只要出现“anim-”，则识别其为可以添加CSS动画的页面元素，“anim-”头部之后的字符，本发明不对其加以限制。

当然，在本发明实施例中，可以在多个指定的页面元素中添加动画添加类标识。即web网页的开发者在编写html文档的时候，可以在各个需要添加CSS动画的页面元素中设置“anim-”开头的类名。

优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；该动画添加位置提示内容可以文本形式存在，或者以其他具体内容的形式存在，那么在浏览器加载该待添加的CSS动画的html文档之后，其渲染得到的tab页面的相应页面元素位置会出现动画添加位置提示内容，方便用户操作。

以前述待添加的待添加CSS动画的html代码如示例(5)：：

示例(5)：

<html>

<body>

<divclass＝”anim-title”>

此处添加动画

</div>

</body>

</html>

其中，画添加位置提示内容为“此处添加动画”。该段代码渲染后，在tab页面中的展示如图1D。

步骤120，通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

另外，在本发明实施例中，在浏览器中预置动画添加扩展程序，该扩展程序可以在浏览器内核解析HTML文档后，识别该动画添加类标识，接收用户在该动画添加类标识所在的页面元素之上的点击操作，生成动画选择窗口，然后通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示。

当然，在本发明实施例中，可预先设置一个CSS动画库，如animation.CSS，该CSS动画库中预置了各种CSS动画的CSS代码，并且以CSS动画名称与相应CSS代码对应。所述动画选择窗口，可获取CSS动画库中的CSS动画名称，以下拉列表的形式展示给用户，然后通过预定接口，将CSS动画名称与animation.CSS中的相应的CSS代码对应。

那么，在本发明实施例中，当用户在指定的某个页面元素上点击之后，则可弹出动画选择窗口，然后用户在该动画选择窗口选择某个CSS动画并确定之后，则该CSS动画实时在tab页面中渲染展示；当用户选择另外一个CSS动画并确定之后，该CSS动画则替换之前选择的CSS动画，实时在tab页面中渲染展示。

当然，在本发明实施例中，所述动画选择窗口中，除了CSS动画名称，还包括其他选项，比如动画时长、动画延时、动画循环次数等选项。其中动画时长为CSS动画执行一次的总时长，动画延时为CSS动画在当前页面展示多长时间后开始展示，动画循环次数为动画执行的次数。

步骤130，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

在本发明实施例中，在用户选择了一个CSS动画并确定之后，针对该CSS动画，通过网页文档编辑器的修改接口，可直接针对网页文档编辑器中的html文档中，对应用户点击的页面元素的位置，生成适配各种浏览器内核类型的CSS代码。然后用户可将网页文档编辑器中的该最终的html文档导出，提供给服务器以发布到线上。

比如前述示例(4)的html文档，其tab页面中，用户在class＝”anim-title”的div之上，选定了myfirst的CSS动画，则将其CSS代码，如示例(6)：

示例(6)：

加入到html代码中对应div的级联样式表中，得到最终的html代码，如示例(3)。

当然，本发明实施例中，上述CSS代码可以采用内联样式表的形式添加到上述html代码中，也可以外联样式表的形式添加到所述html代码中，本发明不对其加以限制。其中，示例(3)为以内联级联样式表形式添加CSS代码的示例。

优选的，在所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：

步骤131，在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

即将示例(5)中的div标签之内的“此处添加动画”删除，然后以内联样式表的形式添加上述CSS动画的CSS代码。

本发明实施例可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。

实施例二

参照图2，其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以包括：

步骤210，加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识和动画添加位置提示内容；

如前述示例(5)所示的HTML代码：

<html>

<body>

<divclass＝”anim-title”>

此处添加动画

</div>

</body>

</html>

在本发明实施例中，用户可在网页文档编辑器中编辑上述html代码，然后浏览器从网页文档编辑器中获取上述html代码，并进行加载，得到tab页面。如图1D所示。

步骤220，在tab页面中，是否侦听到对应动画添加类标识的页面元素之上的触发操作；如果在侦听到所述触发操作，则进入步骤230；

如果未侦听到触发操作，则不进行后续处理。

步骤230，启动动画选择窗口；

当用户在图1D中点击“此处添加动画”，则浏览器判断接收到对应动画添加类标识的页面元素之上的触发操作，启动动画选择窗口，如图2A，其中201为动画选择窗口。

步骤240，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

用户可以在201左侧202的下拉菜单中选择其需要添加的CSS动画，当前选择的是myfirst动画。

myfirst动画代码和运行过程如实施例一所述。

优选的，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

子步骤241，在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

如图2A中，动画选择窗口还包括动画时长输入子窗口，动画延时输入子窗口、动画循环次数输入子窗口，用户可以在上述窗口中输入相应的参数。如果都不输入，则按照系统默认的参数执行。

那么myfirst循环一次，则由图2B变到图2C，再由图2C变到图2B。

优选的，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

子步骤242，针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

在本发明实施例中对不同的浏览器内核，对某些CSS样式的支持也存在差异，比如容器宽度在不同的浏览器中解释不同，比如说设置width：200px，在IE9下显示的是200px，在FF浏览器、Chrome浏览器、Opera浏览器中显示的是220px。

当然，本发明实施例中，针对不同的浏览器内核，可以预先设置各种类型的CSS代码，即一个CSS动画，设置多套CSS代码，每套CSS代码对应一个或几个浏览器内核。

比如W3C，在CSS3中定义在keyframes中创建动画。而在Safari内核和Chrome内核中，定义在-webkit-keyframes中创建动画，其是在keyframes前加上前缀-webkit-；在firfox内核中，定义在-moz-keyframes中创建动画；在opera内核中，定义在-o-keyframes中创建动画。

那么此时，可根据当前浏览器内核类型，从CSS动画库中，选择相应的CSS代码。

当然，本发明可在W3C标准代码之下，针对各个不同类型浏览器所支持的解析格式，进行相应的转换。

在本发明实施例中，CSS动画库中，针对每个动画可构造一套标准的CSS代码，如采用W3C(WorldWideWebConsortium，万维网联盟)标准预置一套标准CSS代码。然后根据W3C标准代码与各个浏览器内核支持的代码格式，对代码中相应的字段进行转换，比如前述keyframes，而当前浏览器为chorme内核，则将CSS代码中的keyframes转换成-webkit-keyframes。

子步骤243，通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

然后，即可调用JS脚本(JavaScript)，将适配当前浏览器内核解析的CSS代码，添加到当前tab页面的中进行渲染展示。

在实际应用中，将前述CSS代码的中的类名，修改为动画添加类标识，前述JS脚本即可通知浏览器对该CSS代码直接进行渲染展示，无需重新刷新tab页面。

步骤250，在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容；

在删除了图2B和图2C中的“此处添加动画”内容之后，如果再运行，则CSS动画中则不会有上述提示内容。

步骤260，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

比如前述示例(4)的html文档，其tab页面中，用户在class＝”anim-title”的div之上，选定了myfirst的CSS动画，设定动画时长为5s，那么生成的适配各种浏览器内核类型的CSS代码如示例(7)：

示例(7)：

然后，将上述CSS代码以类似示例(3)的形式加到HTML相应的div标签内联样式表中。

当然，本发明实施例中，也可以根据标准的CSS代码与各个浏览器内核所支持的格式之间的对应关系，由标准的CSS代码生成各个浏览器内核支持的CSS代码。

本发明实施例可以对网页文档中包括了动画添加类标识的指定页面元素，在浏览器中实现在该指定的页面元素之上，根据用户的操作，触发动画选择窗口，然后通过该动画选择窗口，在上述页面元素之中添加一个CSS动画，然后浏览器即可实时对该CSS动画进行渲染展示，在用户确定添加哪一个CSS动画之后，则在HTML文档编辑器中的网页文档代码中，在上述页面元素位置添加对应所述CSS动画的CSS代码，由此解决了先编辑网页文档，再去浏览器中刷新预览效果的方案中，以在动画效果不清楚的情况下，对CSS代码进行修改，需要开发者不断来回切换，以保证对CSS代码的修改能够得到动画效果符合需求的代码，其存在动画编辑效率低的问题，取得了可以不用来回切换编辑器和浏览器，可直接通过浏览器确定需要的CSS动画，从而确定CSS代码，提高动画编辑效率的有益效果。

实施例三

参照图3，其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以包括：

页面加载模块310，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

动画实时展示模块320，适于通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

编辑代码修改模块330，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述编辑代码修改模块之前还包括：

提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

实施例四

参照图4，其示出了本发明一种在页面中添加动画的方法的流程示意图，具体可以包括：

页面加载模块410，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识和动画添加位置提示内容；

动画实时展示模块420，具体包括：

选择侦听模块421，适于在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

界面启动模块422，适于如果在侦听到所述触发操作，则启动动画选择窗口；

实时展示模块423，适于通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

提示内容删除模块430，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容；

编辑代码修改模块440，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

优选的，所述实时展示模块，包括：

第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

优选的，所述实时展示模块，包括：

属性信息确定模块，适于在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

优选的，编辑代码修改模块，包括：

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

优选的，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述编辑代码修改模块之前还包括：

提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的在页面中添加动画的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了A1、一种在页面中添加动画的方法，包括：

加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

A2、如A1所述的方法，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

A3、如A1所述的方法，通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示，包括：

在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

如果在侦听到所述触发操作，则启动动画选择窗口；

通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

A4、如A3所述的方法，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

A5、如A3所述的方法，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

A6、如A1所述的方法，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

A7、如A1所述的方法，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：

在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

本发明还公开了B8、一种在页面中添加动画的装置，包括：

页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

动画实时展示模块，适于通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

B9、如B1所述的装置，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

B10、如B1所述的装置，所述动画实时展示模块，包括：

选择侦听模块，适于在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

界面启动模块，适于如果在侦听到所述触发操作，则启动动画选择窗口；

实时展示模块，适于通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

B11、如B10所述的装置，所述实时展示模块，包括：

第一代码选择模块，适于针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

网页代码实时展示模块，适于通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

B12、如B10所述的装置，所述实时展示模块，包括：

属性信息确定模块，适于在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

B13、如B8所述的装置，编辑代码修改模块，包括：

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

B14、如B8所述的装置，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述编辑代码修改模块之前还包括：提示内容删除模块，适于在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

Claims (10)

1.一种在页面中添加动画的方法，包括：

加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

2.根据权利要求1所述的方法，其特征在于，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

3.根据权利要求1所述的方法，其特征在于，通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示，包括：

在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

如果在侦听到所述触发操作，则启动动画选择窗口；

通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。

4.根据权利要求3所述的方法，其特征在于，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

针对所述CSS动画，根据当前展示tab页面的浏览器内核类型，选择相应的CSS代码；

通过JS脚本将所述CSS代码,添加到当前tab页面内进行渲染展示。

5.根据权利要求3所述的方法，其特征在于，通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示，包括：

在所述动画选择窗口中，选择CSS动画的属性信息；所述属性信息包括：动画时长、动画延时、动画循环次数其中至少一个。

6.根据权利要求1所述的方法，其特征在于，在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码，包括：

在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加适配各种浏览器内核的所述CSS动画的CSS代码。

7.根据权利要求1所述的方法，其特征在于，所述网页文档中指定的页面元素中还包括动画添加位置提示内容；

进一步的，所述在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码之前，还包括：

在网页文档编辑器中的所述网页文档中，删除所述页面元素内容中的动画添加位置提示内容。

8.一种在页面中添加动画的装置，包括：

页面加载模块，适于加载待添加CSS动画的网页文档，获得tab页面；所述网页文档中指定的页面元素包括动画添加类标识；

动画实时展示模块，适于通过动画选择窗口，在所述tab页面中对应动画添加类标识的页面元素之中，添加一CSS动画并渲染展示；

编辑代码修改模块，适于在网页文档编辑器中的所述网页文档中与页面元素对应的位置，添加所述CSS动画的CSS代码。

9.根据权利要求1所述的装置，其特征在于，所述网页文档中指定的页面元素包括动画添加类标识，包括：

所述网页文档中的指定div标签中，包括动画添加类标识。

10.根据权利要求1所述的装置，其特征在于，所述动画实时展示模块，包括：

选择侦听模块，适于在tab页面中，侦听对应动画添加类标识的页面元素之上的触发操作；

界面启动模块，适于如果在侦听到所述触发操作，则启动动画选择窗口；

实时展示模块，适于通过所述动画选择窗口，从CSS动画库中添加一CSS动画并渲染展示。