CSS过渡动画

最后更新: | 浏览次数: 1749|开发文档

CSS动画说明

动画效果可以为我们的网站或应用程序在页面载入时添加各种炫酷(如图片/文字在页面载入时偏移，淡入，缩放)的效果

友情提示：过度使用动画效果会降低页面性能

参数列表

属性名称 功能说明 默认值
data-animated 定义一个动画 无,必须
data-countup 定义一个数字累加的效果(启用该项勿定义其后任何参数) -
data-reset 元素移入移出视口时重复执行 -
data-delay 延迟执行时间(毫秒) 0
data-distance 动画元素起始执行的距离 '0px'
data-duration 动画完成所需时间(毫秒) 600
data-easing 动画开始值和结束值 之间的过渡方式 'cubic-bezier(0.5, 0, 0, 1)'
data-opacity 动画开始之前的不透明度 0
data-origin 动画来自方向(top|right|bottom|left) 'bottom'
data-rotate 显示之前的旋转元素 ' { x: 0,y:0,z: 0 }'
data-scale 元素显示之前的缩放比例 1

效果展示

案例演示程序已引入系统CSS和Javascript默认核心文件

数字累加

See the Pen Accumulation of digital effects by Huijun Yang (@hongge) on CodePen.

版块的偏移，淡入，缩放

See the Pen Animation Effect Example by Huijun Yang (@hongge) on CodePen.

文档