在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述。
一、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。
二、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。
三、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。
四、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。
先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片:
图片左侧的文字还没有进入
图片上的四行文字正在逐条进入
图片上四行文字完成动画效果
HTML5全部代码:
index
邓福如
《如果有如果》
《前面路口停》
《邓大福是一只猫》
《Nothing On