css3---动画animation

html:

动画序列：

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

1. 动画animation的属性

综合写法

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: name duration timing-function delay iteration-count direction fill-mode;

前边的两个属性必须写，后边的可以省略；综合写法里边不包含animation-play-state：paused(暂停)，和鼠标经过时配合使用

1.1 详解animation

1.1.1 动画名

​ 设置要使用的·动画名 animation-name:xxx;

1.1.2 持续时间

​ 设置动画播放的持续时间 animation-d

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

uration:5s;

1.1.3 速度曲线

​ animation-timing-function:linear;

​ linear:匀速；ease:慢–快–慢；ease-in:慢–快；ease-out:快–慢；ease-in-out:慢–快–慢；steps():指定了时间函数中的间隔数量

1.1.4 延时时间

animation-delay:10s;

1.1.5 循环次数

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。