CSS制作动画

1.选择器

:nth-child()

:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素

属性选择器
p[例：title]:u=选择有这个属性的标签；
p[属性=‘值’]

input:checked 选中被选中的 表单元素
input:disabled 表示选中禁用 表单元素

：empty 选择没有子元素的标签

:not§ 选择除了P以外的所有标签
:only-child选中只有一个子元素的标签

: root选择根标签

2、过渡

2.1 transition:

1.property（属性：none 没有属性会获得过渡效果。all 所有属性都将获得过渡效果。property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。）
2.duration（持续时间
3.timing-function(运动方式 ：linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
linear
ease
ease-inease-out
ease-in-out
)
4.delay（延迟时间）
前两个必须设置

多属性过渡处理，
transition:属性1 时间，属性2 时间，属性3 时间;

3.变形（transform）

translate(x,y)
将当前元素移动到指定位置。
translateX
translateY

旋转
transform:rotate(deg度数)
将当前元素旋转多少度。

transform:scale(0)
缩放当前元素，设置的值大于1就是放大，小于1就是缩小。

transform:skew(deg 度数)
将当前元素沿着x轴和y轴进行倾斜。

backface-visibility：hidden
当前元素显示背面的时候是否可见。

4.IE怪异盒模型

也是有content + padding + border + margin
width 包含 内容、padding和border

实际宽度=width+margin*2

转换方法 ：
box-sizing:border-box;
内部修改非常好用
图片没有撑满

transform调整*transform: translateY(-25px);

5.动画

animation: name（动画名） duration（持续时间） timing-function delay
interation-count direction fill-mode play-state;
alternate：奇数正向播放，偶数反向。
@keyframes name{
0% {
css属性：属性值；
}
···
100%{
css属性：属性值；
}
}

transform-style: preserve-3d;
转为3d
perspective: 300;/*透视
-webkit-perspective: 300;/浏览器私有前缀，-webkit-谷歌浏览器/