CSS过渡动画(CSS Animations)

最后更新: | 浏览次数: 1017|前端开发基础

CSS动画说明

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

前端版本：20260709

参数

属性名称 功能说明 默认值
data-animated 定义一个动画 无
data-countup 定义一个数字累加的效果 -
data-from 元素移入移出视口时重复执行 null
data-to 延迟执行时间(毫秒) null
data-scroll 屏蔽滚动视口设置 
{
 trigger: item,
 start: "top 60%",
 toggleActions: "play none none none"
  }

参数使用

案例一：

<h1 data-animated data-from='{"y": 60, "opacity": 0,"duration": 0.5}'>标题</h1>

说明：当h1进入视口时，y轴60px，完全透明状态恢复至原始状态，用时0.5s

 

方法 起始状态 结束状态 是否读取当前css 适用场景
from 指定 元素当前CSS状态 ✔ 常用
to 元素当前CSS状态 指定状态 ✔ 常用
from - to 指定 指定 ✘ 需要完全控制动画

示例：

 

参数列表

属性名称 功能说明 默认值
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.