CSS3@keyframes规则和animation动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3@keyframes规则和animation动画相关的知识，希望对你有一定的参考价值。
参考技术A CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式: @keyframes 动画名:0%:css样式 ... 100%:css样式 ，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同使用@keyframes定义了动画，那如何使用呢？
那就得在对应要使用该动画的元素上添加animation属性
animation是一个复合属性，是所有动画属性的缩写，除animation-play-state
1. animation-name 动画名，表示要应用哪个动画
2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0
3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置
4. animation-delay 动画延迟时间，默认0
5. animation-iteration-count 动画播放次数，默认1 只播一次
6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放
7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用
8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放
为啥这个 CSS @keyframes 规则不交叉淡入淡出？
【中文标题】为啥这个 CSS @keyframes 规则不交叉淡入淡出？【英文标题】：Why is this CSS @keyframes rule not cross-fading?为什么这个 CSS @keyframes 规则不交叉淡入淡出？ 【发布时间】：2019-02-28 16:01:26 【问题描述】：我正在尝试创建一个非常简单的幻灯片，在每个图像之间交叉淡入淡出。问题是图像在在下一张图像开始淡入之前淡出。
我希望每张图像淡入 1 秒，再保持 10 秒，然后淡出 1 秒 - 总共 12 秒。
@keyframes 的计算方法是将动画持续时间除以 100，得到每秒 1.81%。
动画延迟为 11 秒，这引起了我的困惑，因为下一张图像应该随着最后一张图像淡出而淡入。
如果有人能说明我做错了什么，我将不胜感激。
HTML：
<!doctype html>
<html>
<body>
<main>
<div id="cf">
<img src="https://placeimg.com/640/480/animals">
<img src="https://placeimg.com/640/480/nature">
<img src="https://placeimg.com/640/480/tech">
<img src="https://placeimg.com/640/480/people">
<img src="https://placeimg.com/640/480/sepia">
</div>
</main>
</body>
</html>
CSS：
@keyframes crossFade
0%opacity: 0;
1.81%opacity: 1;
18.18%opacity: 1;
19.98%opacity: 0;
100%opacity: 0;
#cf img
position:absolute;
left:0;
opacity: 0;
animation-name: crossFade;
animation-duration: 55s;
animation-iteration-count: infinite;
#cf img:nth-last-of-type(1)
animation-delay: 0s;
#cf img:nth-last-of-type(2)
animation-delay: 11s;
#cf img:nth-last-of-type(3)
animation-delay: 22s;
#cf img:nth-last-of-type(4)
animation-delay: 33s;
#cf img:nth-last-of-type(5)
animation-delay: 44s;
Codepen 链接： https://codepen.io/Musicky/pen/YgyOPm
【问题讨论】：
如果你将持续时间除以 100，你如何得到 1.81% 【参考方案1】：我更改了您的百分比和持续时间。这将像您期望的那样显示。
您可能想要调整第一个过渡开始时的长度，但您的原件没有重叠。当事物可整除时，对事物进行计时会更简单。不是说做不到，而是更难实现
@keyframes crossFade
0%opacity: 0;
10%opacity: 1;
20%opacity: 1;
30%opacity: 0;
100%opacity: 0;
#cf img
position:absolute;
left:0;
opacity: 0;
animation-name: crossFade;
animation-duration: 60s;
animation-iteration-count: infinite;
#cf img:nth-last-of-type(1)
animation-delay: 0s;
#cf img:nth-last-of-type(2)
animation-delay: 10s;
#cf img:nth-last-of-type(3)
animation-delay: 20s;
#cf img:nth-last-of-type(4)
animation-delay: 30s;
#cf img:nth-last-of-type(5)
animation-delay: 40s;
<div id="cf">
<img src="https://placeimg.com/640/480/animals">
<img src="https://placeimg.com/640/480/nature">
<img src="https://placeimg.com/640/480/tech">
<img src="https://placeimg.com/640/480/people">
<img src="https://placeimg.com/640/480/sepia">
</div>【讨论】：
@WillHammond 如果此回复解决了您的问题，请将其标记为已接受的答案，以便其他发现此问题的人也知道如何解决他们的问题以上是关于CSS3@keyframes规则和animation动画的主要内容，如果未能解决你的问题，请参考以下文章