transition与animation动画浅析-一一网

浏览器渲染原理

处理 HTML 并构建 DOM 树
处理 CSS构建 CSSOM 树
将 DOM 与 CSSOM 合并成一个渲染树
根据渲染树来布局，计算每个节点的位置
调用 GPU 绘制，合成图层，显示在屏幕上

transition

语法：

transition:属性名时长过渡方式延迟:transition:left 200ms linear
可以用逗号分隔两个不同属性：transition:left 200ms,top 400ms
可以用all代表所有属性：transition:all 200ms

.demo{
    height:100px;
    width:100px;
    transition: 1s 1s height ease;   /*合在一起*/
}
或者：
.demo{
  width: 100px;
  height: 100px;
  border:1px solid red;
  transition-property: all;      /*指定要过渡的css属性，本例中，还可以指定width或height其中的一种，all为全部*/     
  transition-duration: 1s;      /*整个过渡的时长*/          
  transition-delay: 1s;          /*延迟时间*/        
  transition-timing-function: ease;    /*过渡效果*/
}
.demo:hover{
    height: 450px;
    width: 450px;
}
复制代码

属性详解

transition-property：

不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。

transition-duration：

指定从一个属性到另一个属性过渡所要花费的时间。默认值为0。

transiton-timing-function：

有如下几种：
liner ：匀速
ease：默认
ease-in：减速
ease-out：加速
ease-in-out：先加速再减速
cubic-bezier：三次贝塞尔曲线

触发过渡的方式：

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式一般有：:hover :focus :checked 媒体查询触发 JavaScript触发

局限性：
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

animation

animation可以通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。
缩写语法：animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名;
时长：1s 或者 1000ms
过渡方式：跟transition 取值一样，如linear
次数：3说着2.4 说着 infinite（无限循环）
方向：reverse | alternate（效果：开始>结束>开始） | alternate-reverse
填充模式：none | forwards | backwards | both
是否暂停：paused | running

以上属性均有对应的单独属性

示例：跳动的心

<div id="heart">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>
复制代码

*{margin: 0;padding: 0;box-sizing:border-box;}

#heart{
  margin:100px;
  position:relative;
  display: inline-block;
  animation:heart 800ms infinite alternate;
}

@keyframes heart{
  0%{
    transform:scale(1.0);
  }
  100%{
    transform:scale(1.2);
  }
}

#heart>.bottom{
  width: 50px;
  height: 50px;
  background: red;
  transform:rotate(45deg);
}

#heart>.left{
  width: 50px;
  height: 50px;
  background: red;
  border-radius:50% 0 0 50%;
  position:absolute;
  bottom:100%;
  right:100%;
  transform:rotate(45deg) translateX(40px);
}

#heart>.right{
  width: 50px;
  height: 50px;
  background: red;
  border-radius:50% 50% 0 0;
  position:absolute;
  bottom:100%;
  left:100%;
  transform:rotate(45deg) translateY(40px);
}
复制代码