css3动画transition && animation

css 动画：transition（过渡）

由于有些属性动画无心义，因此可动画属性集是一个有限集合

其属性为以下几部分：

• transition-property：指定哪一个或哪些 CSS 属性用于过渡
• transition-duration：指定过渡的时长。或者为全部属性指定一个值，或者指定多个值，为每一个属性指定不一样的时长

• transition-timing-function：指定一个函数(根据四个点肯定一个bezier曲线)，定义属性值怎么变化，值；也能够从 Easing Functions Cheat Sheet 选择缓动效果

  • bezier 曲线定义能够具体看MDN上的timing functions

  • cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

    • P0：默认值 (0, 0)
    • P1：动态取值 (x1, y1)
    • P2：动态取值 (x2, y2)
    • P3：默认值 (1, 1)

      大概效果图--p3的坐标本应该为（1，1），这是css默认的（tips：偷不到图，本身又不想画）

  • 横坐标（abscissas）范围必须是[0, 1]，纵坐标（ordinate）范围若是超出[0, 1]，会有弹跳效果--因为兼容性的问题，这个效果仍是别考虑了
• transition-delay: 指定延迟，即属性开始变化时与过渡开始发生时之间的时长

在使用过程当中简写：transition: <property> <duration> <timing-function> <delay>;

/* 分开写，能够不一一对应，如4个property对应一个duration */
.transition {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  /* transition-property: left color width height;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 80ms; */
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1) 80ms;
  &--move {
    left: 400px;
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    transform: translateY(100px)
  }
}

检测过渡是否完成，这样就能够将css过渡和js动画结合起来

el.addEventListener("transitionend", updateTransition, true);

因此，全部property指定的属性，在值发生改变的的时候，都会遵循duration、timing-function、delay等定义的过分效果达到最后一帧的状态，并保持下来，至于transform，和width等同样，只是一个改变时能够触发transition过渡效果的可动画属性集合中的一个属性，transition，transform基本兼容到ie10。

css 动画：animation（动画）

属性	描述
animation-name	动画名称
animation-duration	一个周期的时间(ms \	s)
animation-timing-function	缓冲效果函数
animation-delay	动画执行前延迟时间(ms \	s)
animation-iteration-count	动画执行的次数
animation-direction	动画是否反向播放
animation-fill-mode	动画执行以前和以后如何给动画的目标应用样式（停留在哪一帧）
animation-play-state	动画暂停/播放(用于js控制动画object.style.animationPlayState="paused"，default: running)

注：以上顺序是简写顺序

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	动画名称
keyframes-selector	定义帧
css-styles	该帧的样式

一个可控的动画

<button @click="animationMove">stopAnimation</button>
<div class="animation" ref="animation"></div>

animationMove (): void {
  let stateg = 'paused'
  if (this.$refs.animation.style.animationPlayState === 'paused') {
    state = 'running'
  }
  this.$refs.animation.style.animationPlayState = state
}

.animation {
  position: absolute;
  border-radius: 50%;
  top: 120px;
  animation: move 1.2s ease-in 80ms infinite alternate;
}
@keyframes move {
  0% {
    left: 20px;
    background-color: red;
    width: 40px;
    height: 40px;
    transform: translateY(0)
  }
  100% {
    left: 400px;
    background-color: rgb(169, 185, 214);
    width: 100px;
    height: 100px;
    transform: translateY(100px)
  }
}

动画和过渡的相同之处应该就是缓冲函数不可变，不一样之处就是动画能够定义多个关键帧，过渡只能定义两个关键帧（起始帧和结束帧）

动画修改一个元素的 width 和 height 会改变它的形状，并且可能引发页面上其它元素的移动和形状改变，这个过程称为布局。基于 CSS 的动画和原生支持的 Web 动画一般在称为合成器线程的线程上处理，transforms 和 opacity 均可以在合成器线程中处理；它与浏览器的主线程不一样，在该主线程中执行样式，布局，绘制和 JavaScript。这意味着若是浏览器在主线程上运行一些耗时的任务，这些动画能够继续运行而不会中断；若是任何动画出发了绘制，布局，或者二者，那么主线程会来完成该工做。这个对基于 CSS 仍是 JavaScript 实现的动画都同样，布局或者绘制的开销巨大，让与之关联的 CSS 或 JavaScript 执行工做、渲染都变得毫无心义；避免使用触发布局或绘制的属性动画。对于大多数现代浏览器，这意味着将动画（修改的属性）限制为 opacity 和 transform；

参考：

• How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance
• MDN:transition
• MDN:animation