CSS动画

CSS3中的动画效果
方法1：过渡
Trantition是过渡属性一般用于伪类选择器对元素变化时执行比较简单动画效果。这些效果就是从元素原始状态到最终状态之前的变化动画。

这个过渡必要的两个属性值 为CSS的属性名还有动画执行的时长
如果一个元素需要有多个属性进行过渡的话，需要在tranition中使用,进行分割。
如果这些属性都是统一进行变化的话，也可以直接使用all
基本上所有CSS的属性都可以进行过渡，但也有一些属性是没有办法过渡的，这些属性一般来讲就是会直接让元素的本质变化的属性。或者是值是没有办法进行量变的。通过这些来判断这个属性是否可以进行过渡。

方法2：动画

animation是专门用于比较复杂的页面动画的CSS属性。并且使用该方法是需要@keyframes这个属性来进行配合使用。
Animation是用于规定元素动画基本设置。
格式：
Animation: 使用的动画名 执行时长 动画执行曲线方法 次数（infinite）是否反向播放（alternate）

一般情况下，动画都是线性动画，也就是说所有@keyframes里的关键帖之间都会自动补充对应的动画效果。有时候我们也需要 使用非线性动画，非线性动画可以直接理解为关键帖之间只放入要求的帖数动画。

steps这是非线性动画的属性值
理解steps

steps 函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量（必须是正整数）

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

总结：

steps函数，它可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。

第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end

最核心的一点就是：timing-function 作用于每两个关键帧之间，而不是整个动画拆分

CSS3动画效果的核心就是，从元素某一个状态到另一个状态的动画演示。

@keyfraes 是用于设置元素动画的关键帖。

圆角属性的使用
Border-radius：这个属性跟margin类似。
如果使用四个值的话，所代表的方向是： 左上，右上，右下，左下

一般情况下，会使用%与px等具体值来进行赋值。但是百分百与具体值所显示的效果是不一样的，使用时需要注意。

多重背景：

使用3D属性进行定位需要注意的事项：
1、元素的在3D旋转后，它的轴方向是不是改变的。
2、元素旋转跟圆（transform-origin）点有关。是以视点所在的轴上进行旋转。
3、使用transform时是会根据里面值的顺序进行旋转移动，所以一定要注意它的使用的顺序。