CSS3 新特性 - CSS3 transition过渡与 animation动画 - 《HTML CSS》

一、transition
二、animation
三、transform变换

一、transition

CSS3的过渡功能就像是一种黄油，可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多，所以才会更平滑

transition的属性格式

transition: property duration timing-function delay;
//先执行宽后，延迟1秒后执行高
transition:width 1s esae,height 1s esae 1s;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称	比如：width height background-color
transition-duration	规定完成过渡效果需要多少秒或毫秒	比如：1s 500ms
transition-timing-function	规定速度效果的速度曲线	liner 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速再减速 cubic-bezier 三次贝塞尔曲线点击
transition-delay	设置动画的延迟	定义过渡效果何时开始

img{
  height: 15px;
  width: 15px;
  transition:width 1s esae,height 1s esae 1s;/*先执行宽后，延迟1秒后执行高*/
}
img{
  height：15px;
  width: 15px;
  transition - property: height;
  transition - duration: 1s;
  transition - delay: 1s;
  transition - timing - function: ease;/*属性分开写*/
}

img: hover{
  height: 450px;
  width: 450px;
}

触发过渡

单纯的代码不会触发任何过渡操作，需要通过用户的行为触发，可触发方式：

:hoever
:focus
:checked
媒体查询触发
JavaScript触发

JavaScript触发transition

<style type="text/css">
  .test {
    background: red;
    width: 100px;
    height: 100px;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
  }

  .test:hover {
      background: red;
      width: 200px;
      height: 200px;
    }
</style>

<body>
  <div id="div" class="test"></div>

</body>
<script type="text/javascript">
  document.getElementById("div").onclick = function () {
    document.getElementById("div").style.width = "200px"
    document.getElementById("div").style.height = "200px"
  }
</script>

⚠️注意: 当元素本身为 display:none 时，若想通过js先将其变为 display:block, 随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block 后用setTimeout延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发
当元素同时加了js点击事件和CSS的:hove,如果触发过js事件,那么:hove会失效,即不会再恢复原来的元素状态

js监听transition过渡事件

let eventList = [
  "transitionstart",
  "transitionrun",
  "transitionend",
]

eventList.forEach(item => {
  ocument.getElementById("XXX").addEventListener(item, function (e) {
    this.innerHTML = `过渡事件触发:${item}`
  })
})

transition的局限性

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

CSS Animation 就是为了解决这些问题而提出的

二、animation

CSS Animation 像Flash制作动画一样，通过关键帧来控制动画的每一步，实现复杂动画效果
ainimation实现动画效果主要由两部分组成

通过类似Flash动画中的帧来声明一个动画
调用关键帧声明的动画

animation动画属性

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

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线，播放方式
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画
animation-play-state	规定动画的状态，播放还是暂停
animation-fill-mode	规定动画时间外属性

name 默认值none，将没有任何动画效果，其可以用来覆盖任何动画
duration 默认值0，意味着动画周期为0，也就是没有任何动画效果
timing-function 主要用来设置动画播放方式,主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式
- linear(匀速)
- ease(缓冲)
- ease-in(加速)
- ease-out(减速)
- ease-in-out(先加后减)
- steps(步数)
- 也可以定义三次贝塞尔(Cubic Bezier)函数的数学函数，来生成速度曲线
delay 在开始执行动画时需要等待的时间，单位毫秒
iteration-count 定义动画的播放次数
- 默认为1
- 如果为infinite，则无限次循环播放
direction 设置动画播放方向
- 默认为nomal，每次循环都是向前播放，0-100
- 另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放
play-state 默认为running播放，paused暂停
- 可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放
- 这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放
- 另外，如果元素动画结束后，元素的样式将回到最原始设置状态
fill-mode 定义动画开始之前和结束之后发生的操作
- none 默认值,动画结束时回到动画没开始时的状态
- forwards 结束时停留在最后一帧
- backwards 让动画回到第一帧的状态
- both 轮流应用forwards和backwards规则

@keyframes 定义关键帧动画

一个 @keyframes 中的样式规则是由多个百分比构成的，可以在这个规则上创建多个百分比，从而达到一种不断变化的效果。另外，@keyframes必须要加webkit前缀

div: hover {
  -webkit - animation: 1s changeColor;
  animation: 1s changeColor;
}

@-webkit - keyframes changeColor {
  0 % { background: #c00; }
  50 % { background: orange; }
  100 % { background: yellowgreen; }
}
@keyframes changeColor {
  0 % { background: #c00; }
  50 % { background: orange; }
  100 % { background: yellowgreen; }
}

上面代码中的0% 100%的百分号都不能省略，

0%可以由from代替
100%可以由to代替
要让changeColor动画有效果，就必须要通过animation来调用它

animation属性与transition的区别

区别animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：

transition 需要触发一个事件才会随着时间改变其CSS属性
animation 在不需要触发任何事件的情况下，也可以随时间变化来改变元素CSS属性

三、transform变换

transform是运动状态时候，必须设置运动时间transition

属性	说明
translate(x,y)	设置盒子位移
scale(x,y)	设置盒子缩放

CSS3 transition过渡 与 animation动画