八一八CSS那些不为人知的transform，transition 和 animation动画秘密

CSS 动画

定义和用法

1）、一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。
2）、动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
3）、CSS 中的 transform，transition 和 animation 是分开的三部分内容，其中 transfrom 主要是控制元素变形，并没有一个时间控制的概念，而 transition 和 animation 才是动画的部分，它们可以控制在一个时间段里，元素在两个或以上的状态切换的效果。
4）、基本上我们会有这样的一个简单的概念，CSS 的动画效果由浏览器控制和渲染，理论上比 JavaScript 的动画效果性能好，但是控制上没有 JavaScript 那么灵活方便。

一 、transform 过渡

属性值：

1. 位移：
   1）、translateX（10px）X轴位移
   2）、translateY（10px）Y轴位移
   3）、translate（X，Y）如果只有一个参数默认X轴，Y轴为0；
   4）、translate3D（X，Y，Z）
   div { transform:translate(20px,20px); }

2. 旋转：
   1）、rotateX（45deg）X轴旋转
   2）、rotateY（45deg）Y轴旋转
   3）、rotateZ（45deg）Z轴旋转
   4）、rotate（45deg）视觉上为Z轴旋转
   5）、rotate3D（X，Y，Z，deg）
   div { transform:rotate(7deg); }

3.伸缩：
1）、scaleX（2）X轴位移
2）、scaleY（2）Y轴位移
3）、scaleZ（45deg）Z轴伸缩
4）、scale（X，Y）如果只有一个参数默认X轴，Y轴为0；
5）、scale3D（X，Y，Z）
div { transform:scale(1.5,1.5); }

4.倾斜：
1）、skewX（）
2）、skewY（）
3）、skewZ（）
div { transform:skew(20deg,20deg); }

二 、transition触发型动画

            ```
             例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
             div{
             width:100px;
             transition: width 2s;
             }
             ```

属性值：

1. transition-duration: 1s； 过渡时间
   div { transition-duration: 5s; }

2. transition-property:all； 参与过渡动画的属性
   div { transition-property:width; }

3. transition-delay:0s； 动画延迟执行时间
   div { transition-delay:2s; }

4. transition-timing-function:linear；
   默认：
   ease：平滑过渡，快-慢，逐渐变慢
   ease-in：平滑过渡，慢-快，加速状态
   ease-out：平滑过渡，快-慢，减速状态
   ease-in-out：平滑过渡，慢-快-慢
   div { transition-timing-function:linear； }

三 、transform-style过渡样式

transform-style:float；平面
transform-style:preserve-3d；立体

四 、animate帧动画

1.定义帧动画：

动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

@keyfranes 动画名称 {
  起始帧：0% = from
         0%{}
         from{}
  结束帧：100% = to
         100%{}
         to{}
例：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

2.使用帧动画：

animation:动画名称，动画过渡时间,复合属性。

1）. animation-duration: 1s； 动画过渡时间，默认值是 0，意味着没有动画效果

属性值
time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

2）. animation-delay: 0s 动画延迟时间，默认是 0

属性值
time： 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

3）. animation-timing-function 动画缓动方式，默认是 "ease"

属性值
linear：动画从头到尾的速度是相同的
ease：平滑缓动，快-慢，逐渐变慢
ease-in：平滑缓动，慢-快，加速状态
ease-out：平滑缓动，快-慢，减速状态
ease-in-out：平滑缓动，慢-快-慢
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4）. animation-iteration-count 动画执行次数，默认是 1

属性值
n：定义动画播放次数的数值。
infinite：规定动画应该无限次播放。

5）. animation-name 动画名称

属性值：
keyframename： 规定需要绑定到选择器的 keyframe 的名称
none： 规定无动画效果（可用于覆盖来自级联的动画）

6）. animation-direction 动画执行方向

属性值：
normal：正常方向
reverse：反方向

7）. animation-play-state 规定动画正在运行还是暂停

属性值：
paused： 规定动画已暂停
running： 规定动画正在播放

8）. animation-fill-mode 规定对象动画时间之外的状态

属性值：
none： 默认值，不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始时的状态

例:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简写模式：
div
{
animation: myfirst 5s linear 2s infinite alternate;
}