关于css:Transform-Transitions-Animation

Transform 转换

一些罕用的属性：

• transform: none | transform-functions;【通过设置该属性的值，咱们能够对元素应用转换，具体的属性值在上面会专门介绍。】
• transform-origin: x-axis y-axis z-axis;【设置元素转换的中心点，最直观的例子旋转图片，扭转图片抉择依赖的旋转核心。】
• transform-style: flat | preserve-3d;【定义外面转换的元素是在 2D 立体出现还是在 3D 空间出现，讲的直白些，就是这个元素外面的空间维度是二维还是三维。】
• perspective: number | none;【属性是定义 3D 元素距试图的间隔，设置当前，其子元素会取得透视成果，须要留神的是该值只对 3D 转换无效，这也是很容易了解的。此外，还能够通过 Transform 的属性值的形式设置，二者是有肯定区别的，你能够认为，前者是把整个看成一个舞台，后者是每一个都是一个舞台。】
• perspective-origin: x-axis y-axis;【必须和 perspective 一起应用，只对 3D 转换元素无效，简略的了解就是你的眼睛看的焦点。】
• backface-visibility:hidden | visible;【这个很简略，设置当元素背对着屏幕时候，是否是可见的。】

下面介绍的属性 transform: none | transform-functions; 其中有很多办法能够应用，具体的请查看文件 API，这里没有列举进去的意义，其中 perspective(n) 办法是为 3D 转换元素定义透视视图，须要略微注意一下，其中一些办法比拟非凡，当前会独自去介绍。

Transitions 过渡

transition: property duration timing-function delay;

请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡成果。下面是对立设置，也能够别离设置各个属性。

一些罕用的属性：

• transition-property：规定设置过渡成果的 CSS 属性的名称；
• transition-duration：规定实现过渡成果须要多少秒或毫秒；
• transition-timing-function：规定速度成果的速度曲线；
• transition-delay：定义过渡成果何时开始。

Animation 动画

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

请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。下面是对立设置，也能够别离设置各个属性。

一些罕用的属性：

• animation-name：规定须要绑定到选择器的 keyframe 名称；
• animation-duration：规定实现动画所破费的工夫，以秒或毫秒计；
• animation-timing-function：规定动画的速度曲线；
• animation-delay：规定在动画开始之前的提早；
• animation-iteration-count：规定动画应该播放的次数；
• animation-direction：规定是否应该轮流反向播放动画；
• animation-fill-mode (能够设置为 none | forwards | backwards | both)：规定动画在播放之前或之后，其动画成果是否可见；
• animation-play-state（能够设置为 paused|running）：规定动画正在运行还是暂停，能够在 JavaScript 中应用该属性，这样就能在播放过程中暂停动画；
• @keyframes animName{from {} to {}}：定义动画名称为 animName 的动画关键帧。