标签：动画 设定 拨放 keyframes aos css data CSS
【学习笔记】CSS 动画keyframes
必要项目
- @keyframes 动画名称 对应 animation-name: 动画名称
- 动画持续时间 ，指动画开始到结束时间，预设为0，若没有设定，动画不会执行。
下图即box 物件从距离左边0px 位置往右移200px、从粉色变成绿色的写法。由于.box1里面有写背景色red，所以动画开始前.box 预设会是红色。
除了可以使用from, to 来设定动画之间的变化之外，也可以用0%~100% 百分比。下图表示在animation-duration 期间0%~100% 的变化。即关键影格(keyframes) 的位置，0% 表示第一格，50% 表示中间，100% 表示最后一格。
常用属性
动画迭代计数 : 可以 指定动画拨放次数 ，或是无限次拨放，预设为1次， infinite 则为无限次重复拨放。
动画延迟 : 可以设定 动画延迟拨放。 animation-delay :2s，即动画会延迟2 秒从第一秒开始拨放。如果设定为负值，动画会快转，例如动画时长10s，deley设为-2s, 那动画会从第二秒开始拨放，拨8s后停止。
动画填充模式 : 指动画最后停留位置，预设为none，即拨放完之后会回洞第一个位置。另有forwards (停留在最后一个位置)、backwards (留在第一个位置)、both (拥有前两者功能)三个值， 这篇 文章有更清楚的说明。
动画方向 : 指动画进行的方向。 (1) 预设normal 顺时针移动(2) reverse : 反方向移动(3) alternate : 奇数次拨放时会照原本的时序(4) alternate-reverse : 跟alternate 相反，奇数次拨放是逆时针，偶数次拨放是顺时针。
另外还有animation-timing-function 动画拨放的速度曲线，可以直接透过 范例(codepen) 查看差异，或是参考 此篇 文章。
套件
动画.css
下载Animate.css 或直接使用CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
必要项目为animate__animated，可以看到官方在animate__animated 里面写了 动画持续时间 属性，同文章一开始提到的必要项目"动画拨放期间"。
animal.min.css 官方原始碼
另外一个animate__shakeX 则是动画效果(可依设计需求参考官方用法改用别的效果)，从animate.min.css 文件可以看到它使用0%~100% 搭配transform 设定了在不同时间物件变化效果。
转换 可以用来改变视觉格式模型(visual formatting model)，具有空间维度的概念，让物件平移(translate)、旋转(rotate)、缩放(scale) …等功能( 完整属性详见MDN )。
这里的属性值使用了translate，包括 :
//括号内写单位或百分比都可以。
transform: translate(12px, 50%); // 同时设定x, y 轴的平移数值
transform: translateX(2em); // 设定x轴平移数值
transform: translateY(3in); // 设定Y轴平移数值
transform: translateZ(2px); // 设定z轴平移数值
transform: translate3d(12px, 50%, 3em); // 包含 x y z
animate__shakeX 主要动画效果: 设定在奇数时间时x 轴往-10px移动，偶数时间x 轴往右10px 移动。
Animate.css 提供了多种效果，透过复制使用首页右侧效果css 即可使用。
Animate.css 首頁
套件 到
载入CSS、JS 之后就可以直接套用了
<link href=”https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/aos.css" rel=”stylesheet”>
<script src=”https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/aos.js"></script> <script> AOS.init(); </script>
动画效果分为全域设计跟单一设计，全域设计指写在js 所有动画通吃的设定，单一设计指写在Html class 属性，包括：
<div
data-aos="淡出"
日期-aos-offset="200"
日期操作系统延迟=“50”
数据-aos-duration="1000"
data-aos-easing="缓入出"
数据-aos-mirror="true"
数据-aos-once="假"
data-aos-anchor-placement="top-center">
</div>
data-aos 呈现的效果, 可参考官网展示
data-aos-offset 卷轴滚到多少才触发
data-aos-delay 延迟秒数
data-aos-duration 持续时间单位是毫秒,1000=1秒
data-aos-easing 执行速度，可以从 官方 github 参考其他效果
**data-aos-mirror 元素滚动时是否有动画
** data-aos-once 是否只触发一次，还是有滚动都触发
data-aos-anchor=”.example-anchor” 指滚到该元素时会同时叫出.example-anchor 的元素动画
data-aos-anchor-placement 指滚动到哪才触发，值包括：
(1) top-bottom : 指「元素的顶端」在浏览器的下方时执行动画
(2) center-bottom : 指「元素的中间」在浏览器的下方时执行动画
(3) bottom-bottom : 指「元素的底部」在浏览器的下方时执行动画
(4) top-center : 指「元素的顶端」在浏览器的中间时执行动画
(5) 另有top-top、center-center、center-top、bottom-center、bottom-top，以此类推
另外跟动画效果相关的套件还有 悬停.css 以及 视差.js
hover.css 顾名思义即滑鼠移动过去时显示的效果，parallax 则是运用位移达到视差效果，这两个部分之后有研究再分享。
我的练习 :
CSS 关键帧
套件 动物.css + 变换
套件 到
CSS keyframes 学习资源：
CSS keyframe oxxo 完整解析
animation-fill-mode 动画停留位置
animation-timing-function 速度曲线
套件 :
动画.css
到 、 Github
悬停.css
视差.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/1994/10543103
标签：动画,设定,拨放,keyframes,aos,css,data,CSS 来源： https://www.cnblogs.com/amboke/p/16641566.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。