简单的过渡动画

简单的过渡动画

开发工具与关键技术：DW前端

作者：盘子

撰写时间：2019年1月26日

动画变形功能可以对HTML组件执行位移、旋转、缩放、倾斜这4种几何变换从而控制HTML组件使其呈现出丰富的外观。借助于这几种几何变换，css3提供了transition动画。而transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。下面是一个简单的过渡动画即使用过度属性的动画，见源代码截图如下：

如图所示，源代码部分极其简洁，只在body部分设置了两个div作为装东西的容器盒子。

而css样式部分的代码也不多，见代码如下截图：

在样式中给它设置了个圆角效果使得图片发生了状态性改变，由最初的方形变成了叶子形状（见下面的效果图）。而图片间的转换则依赖于动画中的过度属性transition-property。CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

transition-timing-function属性指的是过渡的“缓动函数”。

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

ease-in:动画开始的速度较慢，然后速度加快。

ease-out:动画开始的速度很快，然后速度减慢。

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

如上图中的画线句transition:2s;和transition:2.5s;这两句都是使用过渡时间属性。

不同属性的使用有不同的效果，如使用过渡时间属性，给其设置不同的时间，从而达到预期的动画效果。如图1、图2，所设的时间不同它们出现的顺序也不同。见下面效果图：

                               效果图

当鼠标移动到图片上，图片开始旋转，同时图片发生转换。转换顺序由初始图即左边绿色图变换为右边的房屋图，而后再变换为绿色图。