利用CSS3实现平移动画效果示例代码

一、平移动画有关的CSS3属性以及相关的属性描述

　　1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度，宽度，颜色等）。
　　2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬）。
　　3、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率（例如：先快后慢，先慢后快，匀速变化等等）。
　　4、transition-delay：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。

先来三张效果图，由于是一个动态的过程，这里只发三张动态瞬间图片：　

二、效果图

图片左侧的文字还没有进入

图片上的四行文字正在逐条进入

图片上四行文字完成动画效果

三、示例代码
HTML5全部代码：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表