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 performanceMDN:transitionMDN:animation