CSS过渡动画(CSS Animations)
最后更新: | 浏览次数: 216|前端开发
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.