css3-转换/变形（transform）、过渡（transition）、动画（animation+@keyframes）

转换（transform）

2D转换

• translate()：

  

  translate.png

• rotate()：

  

  rotate.png

• scale()：

  

  scale.png

• skew():

  

  skew.png
  

  skew.png

• matrix():
  matrix( a, b, c, d, e, f );
  a 水平缩放
  b 水平倾斜
  c 垂直倾斜
  d 垂直缩放
  e 水平移动
  f 垂直移动
  

  

  matrix.png

• transform-origin (): 允许您更改转化元素位置
  

  

  image.png

3D转换

image.png

• transform-origin(): 允许你改变被转换元素的位置。
  

  

  image.png

• transform-style(): 规定被嵌套元素如何在 3D 空间中显示。
  

  

  image.png

• perspective(): 规定 3D 元素的透视效果。
  

  

  image.png

• perspective-origin(): 规定 3D 元素的底部位置。
  

  

  image.png

• backface-visibility(): 定义元素在不面对屏幕时是否可见。
  

  

  image.png

过渡

元素从一种样式逐渐改变为另一种的效果

过渡属性

过渡属性.png

• transition: property duration timing-function delay;
• transition-property: none|all| property;属性指定CSS属性的nametransition效果
• **transition-duration : time;属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
• transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);属性指定切换效果的速度。
  
  

  transition-timing-function值.png
• **ttransition-delay : time;属性指定何时将开始切换效果。
  transition-delay值是指以秒为单位（S）或毫秒（ms）。

多项改变

多项改变.png

与转换效果一起使用

与转换效果一起使用例子.png

动画

@keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称

• 规定动画的时长

  
  
  

  规定动画的名称、时长.png

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

百分比.png

from" - "to.png

动画属性

• @keyframes:规定动画。

  
  
  

  keyframes.png

• animation:所有动画属性的简写属性，除了 animation-play-state 属性。

  
  
  

  animation.png
• animation-name:规定 @keyframes 动画的名称。
• animation-duration:定义动画完成一个周期需要多少秒或毫秒。默认是 0。

• animation-timing-function:指定动画将如何完成一个周期。

  
  
  

  animation-timing-function.png

• animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

  
  
  

  animation-fill-mode.png

• animation-delay:定义动画什么时候开始。单位可以是秒（s）或毫秒（ms）。默认是 0。

  
  
  

  animation-delay.png

• animation-iteration-count:定义动画应该播放多少次。

  
  
  

  animation-iteration-count.png

• animation-direction 属性定义是否循环交替反向播放动画。

  
  
  

  animation-direction.png

• animation--play-state属性指定动画是否正在运行或已暂停。

  
  
  

  animation--play-state.png

动画常见坑

1. @keyframes 不能实现突变的状态变化
   @keyframes 的原理是把样式的从一个状态，慢慢转变为另一个状态。例如：

* div 在2s内下移200px
*/
div {
    position:absolute;
    animation: move 2s;
}
@keyframes move {
    from { top:0; }
    to   { top:200px;}
}

上述div的移动，不是一步完成的，而是中间有很多个状态，从top:1px , 到top :2px , top: 3px ……最终到 top:200px; 这样一系列状态组成而构成的动画。
所以，如果不存在渐变的状态，是无法用@keyframes构成动画的，例如：

div {
    animation: apear 2s;
}
@keyframes appear {
    from { display:none; }
    to   { display:block;}
}

我们知道，display:none;是将div消失并且不占空间，display:block;则是将div展现存在并占据空间。但上述代码是无法使div拥有 2秒内从消失到展现 的渐变动画的，因为display:none;和display:block;是突变的，是从display:none;一下子到display:block;状态的。所以@keyframes无法实现。
同理其他种类的突变属性也无法拥有@keyframes的动画效果，@keyframes 只存在于渐变属性当中，例如各种width, height, opacity等属性值为数值的属性。

2. @keyframes会增添/覆盖属性

/*
* div 在2s内下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:20px; }
    to   { top:200px;}
}

覆盖属性：如上述情况，div初始状态是top:0; @keyframes首先用top:20px覆盖原属性（top:0;）,然后再启动@keyframes功能。 所以我们看到的效果是：div突然瞬间下降20px，然后在2秒内下降至指定位置（top:200px;）。

/*
* div 在2s内下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:0px; }
    to   { bottom:0px;}
}

添加属性：上述代码初始状态是div在顶部，最后状态是div 在底部，但像上面这样写 并不会出现div 从顶部慢慢下滑至底部的动画，而是div突然就出现在了底部。这是因为初始状态为div{ top:0px ;}，但最终状态却不会是 div { bottom:0px; } , 而是 div { top:0px; bottom: 0px; } ，这样就会出现明显的错误，达不到我们预想的效果。

小结: @keyframes 中的属性，如果div本身存在该属性，就被@keyframes 中的属性给覆盖掉。 如果div本身不存在该属性，则为div增添该属性。

3. 动画性能优化
   当你在使用@keyframes 动画时，如果做的动画比较复杂的话，就会发现一个问题，那就是不流畅，掉帧，可能在PC端还不是很明显，但在移动端你就会发现严重地掉帧。这是因为，如果@keyframes 改变的属性是与layout相关的话，就会触发重新布局，导致渲染和绘制的时间会更加地长。 所以，我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。
   • 触发重新布局的属性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
   • 不会出发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。
4. 已知bug
   • iOS 6.1及以下不支持伪元素动画。iOS 7和更高的版本的伪元素动画会些问题。
   • Firefox 不支持@keyframes 在内联元素的使用。
   • 在Chorme中，如果使用了steps(x , start) ，animation-fill-mode backwards将会出错。如例子
   • 在IE10和IE11中，@keyframes不能在媒体查询@media内使用。

————————————————
参考链接：

• https://blog.csdn.net/Cherishor/article/details/51100303
• https://www.runoob.com/css3/css3-animations.html