1.【transition】过渡

过度动画：将样式改变的过程展现出来，产生过渡效果

transition 是令一个或者多个可以用数值表示的css属性值发生变化时产生过渡效果

【transition-property】

设置过度的属性

单独过度某个属性

同时过度多个属性

默认值：all表示过渡所有可以过渡的属性。

【transition-duration】

设置过度持续时间 单位：s

【transition-delay】

设置过度延迟多久开始执行(延迟时间)

【transition-timing-function】

缓动函数，指定动画效果在执行时的速度

【参数值】

    linear匀速
    ease默认值，逐渐减速
    ease-in加速
    ease-out减速
    ease-in-out先加速，在减速

【过渡的综合写法】

有2个时间时，前一个表示过渡所需时间，后一个表示延迟时间

    transition:all 过渡时间（S） 缓动函数 延迟时间(S);

设置过渡至少需要设置2个参数：过度属性和执行时间

    transition:all 过渡时间（S）;

2.【transform】2D变换

2D图形变换:是在二维平面上对图形进行平移，缩放，旋转等一系列的操作

【translate】平移

translate()平移，有2个值分别对应x轴和y轴

    transform:translate(X,Y);

正值：x轴往右，y轴往下 负值：x轴往左，y轴往上

如果只有一个值,对应x轴，y轴默认为0

    transform:translate(X);

【scale】缩放

scale() 缩放，有2个值分别对应x轴和y轴

值表示缩放的倍数

如果只有一个值，x轴和y轴都为这个值

设置基点，默认值为50% 50%，2个值分别对应x轴和y轴

    transform:scale(缩放大小);
    transform-origin:50% 50%;

【rotate】旋转

rotate() 旋转 ，单位deg表示度

正值：顺时针；负值：逆时针

    transform:rotate(角度数值deg);
    transform-origin:100% 200%；（基点）

【skew】倾斜

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

如果未指定第二个参数，则值为零。

    transform:skew(角度数值deg);

3.【@keyframes】css关键帧动画

动画使元素逐渐从一种样式变为另一种样式。

需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定animation-duration属性，则动画不会发生，因为默认值是 0s（0秒）。

【animation-name】动画名称

【animation-duration】动画时间

【animation-delay】规定动画开始的延迟时间。

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

【animation-iteration-count】指定动画应运行的次数。

【infinite】使用值 "infinite" 使动画永远持续下去

【animation-direction】指定是向前播放、向后播放还是交替播放动画。

【参数值】

【normal】动画正常播放（向前）。默认值
【reverse】动画以反方向播放（向后）
【alternate】动画先向前播放，然后向后
【alternate-reverse】动画先向后播放，然后向前

【alternate】

使用值 "alternate" 使动画先向前运行，然后向后运行

【alternate-reverse】

使用值 "alternate-reverse" 使动画先向后运行，然后向前运行

【animation-timing-function】规定动画的速度曲线。

【ease】 - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
【linear】- 规定从开始到结束的速度相同的动画
【ease-in】 - 规定慢速开始的动画
【ease-out】- 规定慢速结束的动画
【ease-in-out】- 指定开始和结束较慢的动画
【cubic-bezier(n,n,n,n)】- 运行您在三次贝塞尔函数中定义自己的值

【animation-fill-mode】规定目标元素的样式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

【none】- 默认值。动画在执行之前或之后不会对元素应用任何样式。
【forwards】 - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
【backwards】- 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
【both】- 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

【animation】动画简写属性

    animation: name duration timing-function;

全部简写：

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

（css学习结束，基础知识完成，开始积累经验吧！）