CSS动画aimation以及关键帧@keyframe的心得理解

HTML基础标签解析

1. div 块级元素 默认高度为0，宽度为100%； 可以设置宽和高，独占一行，默认不能并排显示。
2. span 行级元素 默认高度为一个字符，宽度为0； 不能设置宽和高，上下外边距无效。
3. box-shadow box-shadow：xpx，y%，z%，w%。
   x和y表示阴影的水平和竖直位置，z表示阴影的模糊度，w表示阴影的高低位置。
4. RGB十六进制
   #XX YY ZZ X表示红色的十六进制数，Y表示绿色的十六进制数，Z表示蓝色的十六进制数。
5. dispaly block将标签设置为块级元素 inline-block设置为行级元素 none隐藏元素
6. position relative相对定位 当元素具有相对定位属性时具有以下属性
   left，right，top，bottom，z-index相对于初始位置进行移动 absolute绝对定位
   元素将不再独占一行，相对于上一级父元素进行定位，如果没有定位属性，将继续向上一级寻求定位。fixed固定定位。网页中一般的定位规则：父元素==>相对定位 子元素==>绝对定位（父元素为参考点）
7. transition过渡属性 transition：标签属性或者all 过渡时间 过渡形式 延时时间
   过渡形式：ease-in， ease-in由慢到快 ease平滑过渡 linear线性过渡
   ease-out由快到慢 ease-in-out慢快慢
8. 伪类选择器1 运用before，after之类的选择器时在之前加上：：
9. before在原有标签之前加东西 after在原有标签之后加东西
10. transform rotate（xdeg）旋转，表示旋转的角度
11. 伪类选择器2 父元素 子元素：first-child访问子元素中的第一个 父元素 子元素：last-child访问子元素中的最后一个
    父元素 子元素：only-child访问只有一个子元素的子元素 父元素 子元素：nth-child(x)访问子元素中的第x个
12. 伪类选择器3 父元素 子元素：first-of-type访问子元素类型中的第一个 父元素
    子元素：last-of-type访问子元素类型中的最后一个 父元素 子元素：only-of-type访问子元素类型中唯一第一个 父元素
    子元素：nth-of-type(x)问子元素类型中的第x个
13. float浮动，子元素拥有此属性时将跳出父元素的限制
14. text-decoration:none;去除下划线
15. 文本样式会被后代元素继承:color，text-开头，line-开头，font-开头 CSS样式优先级：id>class>标签

CSS动画部分透析理解

1. 使用@keyframes规则，可以创建动画。

在动画的过程中，可以多次更改css样式的设定。

对于指定的变化：发生时用0%，或关键字“from”和“to”，这与0%和100%相同。

0%：开头动画。

100%：动画完成。
语法：
1   @keyframes animationname { keyframes-selector { css-styles;} }。
2   可以使用关键词“form”和“to”来表示动画从开始到结束的关键帧。
3   还可以使用%定义多个关键帧的样式（而%的基值是动画播放时间：animation-duration）。

2. animation
animation:(与关键帧关联的ID）（完成一次动画的时间） （动画的过渡样式） （过渡中颜色）；
过渡样式推荐参考[https://easings.net/]

 1、animation-name：指定要绑定到选择器的关键帧的名称。
 2、animation-duration：定义动画完成一个周期需要多少秒或毫秒
 3、animation-timing-function：指定动画将如何完成一个周期。
 4、animation-delay：定义动画什么时候开始。
 5、animation-iteration-count ：定义动画应该播放多少次。
 6、animation-direction：定义是否循环交替反向播放动画。
 7、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
 8、animation-play-state：指定动画是否正在运行或已暂停。

3. 动画总结

@keyframes就相当于动画中的关键帧，动画中，你需要设置每一帧人物的动作和环境变化。
使用@keyframe时，我们需要搭配属性animation一块使用，animation不能单独使用，必须配合@keyframes｛｝。然后使用animation-name关联起来。