【学习笔记】CSS 动画keyframes

必要项目

1. @keyframes 动画名称 对应 animation-name: 动画名称
2. 动画持续时间 ，指动画开始到结束时间，预设为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/7642/32170108