css之过渡与动画

过渡

即在给定的时间内平滑地改变属性值，常用的属性值有:
transition:默认值，不产生过渡效果,可以增加属性
transition-delay：规定过渡效果的延迟（s）
transition-duration：规定过渡效果要持续多少s或ms。
transition-property：规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
transition-timing-function：规定过渡效果的速度曲线。常见属性：
      ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
      linear - 规定从开始到结束具有相同速度的过渡效果
      ease-in -规定缓慢开始的过渡效果
      ease-out - 规定缓慢结束的过渡效果
      ease-in-out - 规定开始和结束较慢的过渡效果
阐述比较官方，咱们直接来看代码：

div {
  width: 100px;
  height: 100px;
  background: red;
  
}

div:hover {
  width: 100px;
  height:200px;
  background:green;
  transition: height 4s;
}

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div1 {transition-timing-function: linear;}
div2 {transition-timing-function: ease;}
div3 {transition-timing-function: ease-in;}
div4 {transition-timing-function: ease-out;}
div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}

动画

即使元素逐渐从一种样式变为另一种样式，通过改变属性值，从而改变动画的效果，常见的属性有：
@keyframes：指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。如：

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: blue;}
  to {background-color: yellow;}
}
</style>
</head>

上面的例子将 “example” 动画绑定到 div> 元素。动画将持续 4 秒钟，同时将 div> 元素的背景颜色从 “blue” 逐渐改为 “yellow”；

animation-name——规定 @keyframes 动画的名称。
animation-duration——定义动画完成一个周期所需要的时间，以s或ms计。
animation-delay——定义动画开始前等待的时间，以s或ms计。默认值是 0
animation-iteration-count——定义动画的播放次数( n 次)| infinite（无数次)
animation-direction——定义是否应该轮流反向播放动画（normal，动画正常播放）|(alternate 动画应该轮流反向播放。
【注意：动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。】)
animation-timing-function【和上述过渡阐述一致，在此就不赘述了)😉】
animation-fill-mode——CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素，属性值有：
      none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
      forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
      backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
      both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}

思维导图：