CSS动画实现的二种方式+css前端4种布局+link和@import的区别+深度作用选择器

一：
transition：
并不是所有属性都能过渡使用transition，比如display: none 到 display: block。

transform：
translate：位移
scale：缩放
rotate：旋转
skew：倾斜
transform基本上配合transition过渡使用。transform不支持inline元素，使用之前把它变为block。

二：
animation动画
@keyframes规则
keyframes被称为关键帧，其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头，后满紧跟着是动画名称加上一对花括号{…}，括号中就是一些不同时间段样式规则

在一个"@keyframes"中的样式规则可以有多个百分比构成的，如在”0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

需要注意的是：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to

CSS动画实现参考了这篇文章

css之前端4种布局方式之table布局、float布局、flex布局、grid布局

link和@import的区别

link标签属性详解

深度作用选择器：（通常用法：父元素 >>> 子元素 ）