CSS层叠样式的使用，一方面解决了内容与样式的分离问题，另一方面也丰富了前端页面的设计效果及人机交互体验效果。尤其是随着flash动画技术的落寞，越来越多前端动画效果的实现开始采用CSS进行定义与设计，本文主要采用2个实际案例对CSS动画实现进行简单说明。

CSS动画实现

通过使用CSS的属性设置，我们可以添加动画设置，通过样式改变可以实现动画效果。CSS实现2D与3D动画效果主要属性包括animation动画属性，transform属性用于实现3D设置及对象旋转与移动、放缩等。主要属性说明如下：

1、animation属性用于对元素添加动画关键帧，需要结合@keyframes使用，并在关键帧执行时间范围内定义元素的样式。

2、transform属性主要用于设置旋转、扭曲、放缩与移动。用于实现元素形状与位置的变化，如：

transform: rotateX(180deg)表示绕x轴旋转180度；

使用transform时需要注意页面的坐标系，其中3D坐标系描述如下图：

页面3D坐标系

在前端页面中，x指水平方向坐标，y指垂直方向坐标，z指垂直屏幕坐标。通过三个坐标位置的改变实现元素的移动及翻转。

transform基本属性设置

简单2D动画效果实现主要借助于animation属性与@keyframes完成，在关键帧定义部分，循环切换所要展示的动画效果图片即可。本例使用动画素材如下：

2D动画效果素材

使用以上动画效果素材，在指定的时间周期，使用CSS切换DIV层背景图片即可实现动画效果。我们在页面中添加div 并为其设置class属性为anim，设置anim对应的css样式，并完成动画定义。实现CSS样式部分实现代码描述如下：

2D动画实现CSS样式代码

样式设置代码描述如上图所示，其中animation属性设置部分：

animation：mymove 1s infinite；mymove为定义的动画关键帧名称，可以理解为我们下一步定义动画规则的名称，1s表示动画执行的时间为1秒钟，infinite属性表示动画重复执行。

在完成animation属性设置之后，需要进一步编写与之对应的mymove关键帧。关键帧定义如上图所示，其中可以使用两种类型参数，百分比与from、to。from对应的0%，to对应100%。即在动画执行时间内按照百分比进行划分，对应每个百分比处可以继续定义属性。如：

50% {background-image: url('aa/6.jpg');}

则表示在动画执行50%即0.5秒时，修改anim对应div层的背景图片为第六张图片。

最终通过在1秒钟时间内循环切换背景图片，最终给我动画的视觉效果。该实例演示点击以下链接：

2D动画实例

3D动画效果主要通过3D变形CSS属性实现。通过设置3D变形属性，实现在3D坐标范围内构造3D物体，并实现3D物体的动画效果。主要动画效果主要包括拉伸、放缩、移动等。本例所需素材描述如下：

简单3D动画素材

本例主要实现旋转的箱子，箱子6面分别使用素材中提供的图片资源。箱子可以在水平方向与垂直方向进行旋转，并表现出3D效果。旋转箱的静态效果如下：

3D箱静态效果

3D旋转箱子静态展示效果如上图，本例需要使用DIV层表示箱子的6个面，并分别设置6个面对应DIV的背景图片，实现代码描述如下：

3D箱子面的设置

3D箱子设置如上图所示，其中box为箱子整体DIV，内部包含了6个面对应的DIV。各DIV通过class类选择器进行定义与设置。部分CSS设置如下图：

箱子面CSS定义

在上图中我们定义各个面公共样式comm与top面对应样式，主要设置了宽度高度其中top面进行了旋转与背景图片设置，代码如下：

transform: rotateX(-90deg);用于实现旋转；

transform-origin: bottom;设置旋转的轴；

background-image: url('1.png');添加背景图片；

当通过旋转移动在3D环境中构造出箱子各个面之后我们可以进一步通过旋转箱子的包裹层box，实现对箱子进行旋转。类选择器box定义如下：

box属性设置

box属性设置定义如上图，主要完成动画定义，动画帧名称box-rotate，执行时间12秒。transform-origin属性主要定义旋转中心。动画规则@keyframes定义部分如下所示：

动画旋转规则定义

动画关键帧定义如上图，通过使用rotateX、rotateY等属性进行绕x轴或者绕y轴旋转，其参数表示旋转的度数，如：

50% {transform: rotateX(360deg) rotateY(0deg);}

表示在动画执行50%即6S时将箱子绕x轴转动360度，绕y轴转动0度；

本例最终实现效果展示请点击以下链接：

3D动画实例

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！

制图网(www.makepic.net)，专业的logo免费设计在线生成网站，全自动智能化logo设计，商标设计，logo在线生成！

欢迎使用制图网制作属于您公司自己的logo，不仅专业而且经济实惠，全方位满足您公司品牌化、视觉化的需求。