css动画

一、transition：过渡动画

过渡动画：就是在元素在改变属性的时候会有个过渡的过程，transiton就这添加在这个属性改变过渡的时候添加的一个动画，没有的话就没有过渡

1、css transition属性：

需要过渡的css属性，定时触发动画时间，动画的过渡速度ease(缓和) 动画显示的时间0.5s个人理解过度动画的类型ease，ease-in，ease-in-out，ease-out，除了ease-out都是缓慢开始之后就是in加速，out减速，

告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果

可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；

我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；

通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。

可以在不同的伪元素;hover,active切换的时候定义不同的过渡效果

注意：
- 这里动画的过渡速度也可在浏览器调试使用缓冲函数来代替关键字
- 定义伪元素的时候记得的要在父元素上添加和overflow
默认值：all，0，ease，0
transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
并不是所有的css属性会支持动画的可以在mdn文档中查看支持的动画
不支持行内非替换元素

2、参数(4个)

transition-property：定义过渡动画的css属性
- 也可以设置all代表全部属性都会有动画
- 默认值: all
transition-duration：动画的持续时间
transition-timing-function：动画的缓冲快慢的效果，动画速度曲线，也叫贝塞尔曲线
- ease 缓慢开始，突然加速，缓慢结束（默认）

缓慢开始，然后突然加速，最后缓慢移向目标。此关键词表示缓冲函数 `cubic-bezier(0.25, 0.1, “

“0.25, 1.0).。它与 ease-in-out` 类似，但它在开始时加速更快。

ease-in 缓慢开始，突然加速直到结束突然停止

动画缓慢开始，然后逐渐加速直到结束，在结束点时突然停止。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-in-out缓慢开始，突然加速，缓慢结束

动画缓慢开始，然后加速，最后减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。开始时，其表现与 ease-in 函数类似；结束时，与 ease-out 函数类似。

ease-out：突然开始，一直减速到结束

此动画突然开始，然后逐渐减速直至结束。此关键词表示缓冲函数 `cubic-bezier(0.0, 0.0, 0.58, 1.0)

linear：线性从头到尾都是匀速的

steps(): 就是分几步来完成我们的动画

参数：数字

cubic-bezier(0.68,-0.55,0.265,1.55): 贝塞尔函数，mdn也叫缓冲函数

transition-delay ：动画的延迟时间
transition：单例的属性

transition：transition-porperty, transition-duration, transititon-timing-function, transition-delay

3、linear-gradient;线性梯度（渐变）

注意：这里是background-image

background-image: linear-gradient(45deg , red , black );
background-image: linear-gradient(to left top ,red, orange, yellow, green, blue);

参数：

angle ：以元素得中心位置开始顺时针方向设置角度(deg)，该角度方向是起始位置
keys: to left top 向上左方向进行渐变
颜色后面可以添加px和百分比 来决定渐变的范围大小

二、transform形变：旋转，缩放，倾斜或平移

1、简写属性transform

*注意并不是所有的元素都可以形变，transform对于行内级非替换元素是无效的；

一个或者多个, 并且多个之间以空格分隔transform: scale() translate();
注意∶
1.同时使用多个转换，其格式为: transform: translate() rotate() scale) ...等，
2.其顺序会影转换的效果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

transform是形变的意思
- 常见的函数transform function有：平移：translate(x, y) 缩放：scale(x, y) 旋转：rotate(deg) 倾斜：skew(deg, deg)
使用多个位移函数的时候不要重复使用 transform ，相同css属性后面会覆盖前面的属性。
使用多个位移函数中间用空格隔开

2. transform: scale 2D缩放

参数：1是本身的大小，0~~1是缩小 1~~*是放大
也可以使用百分比，但是不常用

3.transform-origin：设置旋转固定点-变换原点

默认转换点是 center

就是在元素的正中间，x轴 50% y50%
参数x-y-z：top，left，right, center(也可以设置关键字的百分比), 像素px，z轴反方向可以设置负值

4. transform: rotateX/Y/Z(*deg)

同样想要显示旋转之后的3d效果也需要设置perspective透视
根据旋转的中心点旋转
单位deg正数为顺时针，负数为逆时针
也可以使用转：0.25turn代表一圈的4分之1

也可以使用rad和grad

5.transform: translate()2D位移

5.1、translateX/Y/Z: 2d平移

translateZ：Z轴平移的时候要借助 perspective透视太能看见

作用：根据x轴和y轴移动元素，单位可以是百分比，相对于自身元素，也可以是像素px

平移之后还会占取原来的空间，不会占取移动后的空间

5.3、案例鼠标移入旋转动画效果

    .box:hover .mask{
      height: 300px;
      top: -150px;
    }
    .mask {
      position: absolute;
      width: 500px;
      height: 0;
      background: rgba(0, 0, 0, .5);
      transform-origin: left center;
      transform: rotate(36.8deg);
      transition: all .5s ease;
      /*其实很简单的动画，需要注意下这里不要直接设置变大后的top
      因为没有高度时候的中心点就在top0 mask变大后才会改变中心点，不变大中心点就是top0
      */
      top: 0;
    }

知识点梳理

1、2D旋转

2、 animation动画

3、var函数

4、calc函数

6.transform: skew 倾斜转换

注意：倾斜的原点受transform-origin的影响
简写属性：单位deg角度两个参数，x轴和，y轴的值
可以是使用skewX，skewY
参数单位：turn(转)，deg(度)

transform: translate3d() 3D位移

三个长度/百分比值
三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于translate3d() 函数（3D 平移）

三、animation定义序列帧动画(8个)

1、transition对比animation

transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
transition不能重复执行，除非一再触发动画；
transition需要在特定状态下会触发才能执行，比如某个属性被修改了；
animation-name：@keyframes定义的动画名称
animation-duration：
- 初始值0s
  
  作用：动画的持续时间
animation-timing-function：

初始值：ease

作用：动画的缓冲曲线
和transition的timing相同，可以使用缓冲函数

animation-delay：

作用：动画的延迟时间
- 单位s
animation-iteration-count：

作用：动画的迭代次数
- 默认值：1
- 关键字：infinite无限循环播放动画.
- 值为也可以为数字，也可以指定多个值用”,“隔开
animation-direction，(4个)

作用：属性指示动画是否反向播放
1. normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
2. reverse ：反向运行动画，每周期结束动画由尾到头运行。
3. alternate ：动画正反向交替运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代
4. alternate-reverse：反向交替，反向开始交替动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode

作用：设置CSS动画在执行之前和之后如何将样式应用于其目标。扩展动画

可以设置多个用，号隔开
- 默认值：none当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
- forwards：动画最后一帧的位置, 目标将保留由执行期间遇到的最后一个关键帧计算值。
```
@keyframes all {
  from {
    transform: translateX(0);
  }
  to {
      //这里的样式就代表这最后一帧的动画样式：animate-fill-mode: forwards
      //就是表示保留最后一帧的动画
    transform: translateX(200px);
  }
}
```
- backwards：动画第一帧的位置 ,动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：
```
@keyframes all {
  from {
      //设置backwords之后，同样的这里是第一帧动画的样式，会在delay设置的时间内展示：animation-fill-mode: backwards
    transform: translateX(0);
  }
  to {
      //设置forwards之后：这里的样式就代表这最后一帧的动画样式：animate-fill-mode: forwards
      //就是表示保留最后一帧的动画
    transform: translateX(200px);
  }
}
```
- both（两端）
  
  动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。就是使第一帧backwards和最后一帧forwards的动画生效
animation-play-state

作用：属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
- 默认值：runing
- 参数：paused 停止动画
- 参数2：running 运行
animation :简写属性
- 可以添加多个动画，用逗号分割animation: keyname .5s , keyname .5s
- 背景图动画，可以使用steps() 和 bgp背景定位来实现

2、使用

2.1、步骤

使用keyframes定义动画序列（每一帧动画如何执行）
配置动画执行的porperty, druation, delay , timing, infinite, forwards, alternate, runing等等

2.2、@keyframes的规则

关键帧使用percentage来指定动画发生的时间点；
0%表示动画的第一时刻，100%表示动画的最终时刻；
因为这两个时间点十分重要，所以还有特殊的别名：from和to；

    div{
            /*之后在选择器中使用*/
            animation: rotate .5s alternate infinite;
        }
        @keyframes rotate {
            0%,10%{
            /*定义没一帧的动画，24fps相当于1秒24张图片，低于16fps就会有明显的卡顿*/
            }
            10%,100%{
            /*定义css属性*/
            }
        }
        @keyframes rotate {
            /*相当于百分之0*/
            from{
            }
            /*相当于百分之100*/
            to{
            }
        }

四、animate.css

官网：https://animate.style/

perspective：单位像素设置的是视距

五、3D转换

特点：

近大远小
物体后面遮挡不可见

1、三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x轴: 水平向右―注意:x右边是正值，左边是负值
y轴: 垂直向下注意:y下面是正值，上面是负值·
z轴: 垂直屏幕注意∶往外面是正值，往里面是负值

2、translate3D(x/y/z): 3D位移

使用：translate3D(x/y/z)等价于translateX,translateY,translateZ
参数：3个参数不能省略，没有变动的话添加0
要利用透视才能显示效果
相比3D位移多了个Z轴

3、rotate3D(x/y/z): 3D旋转

有3D旋转的情况下，不生效的时候注意和translate的先后顺序看看你是要先移动还是先旋转

4、perspective 透视

如果想要在网页产生3D效果需要设置透视（理解成3D物体投影在2D平面内)。

正常逻辑下，如果不透视的话，后面的3d效果我们是看不见的
透视我们也称之为(视距)
要设置在父元素的上面
透视的单位是像素px 一般情况下是800px

5、perspective-origin观察原点

perspective-origin(很重要): 10% 10%;设置观察原点使用的时候看下mdn文档介绍

动画效果歪了的话记得设置观察原点，perspective-origin：center

参数：x-position，观察点x轴的位置，可以为负值

可以是百分比，或者关键字定位属性，left：0的简记，center：50%的简记 right：100%的简记
参数：y-position, 观察点y轴的位置，可以为负值

可以是百分比，或者关键字定位属性，top：0的简记，center：50%的简记 bottom：100%的简记

使用：透视perspective 和 perspective-origin作用在被观察元素的父级/祖先元素上面

6、transition-style 3D呈现

控制子元素是否开启三维立体环境。父元素要设置透视才能看出3d效果
transform-style:flat子元素不开启3d立体空间默认的
transform-style: preserve(保持)-3d;开启立体空间
代码写给父级，但是影响的是子盒子
非继承属性，后代非直接子元素开启三位立体空间的话需要重新设置

使用：同样要是让子元素保持3d立体空间环境也要给父元素设置transform-style: preserve-3d

注意：

盒子旋转歪了的话，调整视距记得让盒子居中
旋转父级元素歪了的话，设置观察原点perspective-origin: 10% 10%或者调整父元素大小，看子元素是否在父元素的中间
一晚上找原因的教训，多设置背景色调试代码

六、动画案例技巧

1、京东无限滚动栏技巧

思路：

将当前列表滚动至最后一项的末尾，然后瞬间切换回第一项

<body>
    <!--看到这个代码应该一下就能明白-->
    <div class="container">
        <div class="scroll-list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播)：数量请自行根据高度进行计算 -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>

2、滚动条动画

::-webkit-scrollbar

滚动条

::-webkit-scrollbar-thumb

滚动快

-webkit-scrollbar：滚动条整体部分 -webkit-scrollbar-button ：滚动条两端的按钮 -webkit-scrollbar-track ：外层轨道 -webkit-scrollbar-track-piece ：内层轨道，滚动条中间部分（除去） -webkit-scrollbar-thumb：拖动条 -webkit-scrollbar-corner：边角 -webkit-resizer ：定义右下角拖动块的样式

注意事项

在给定位元素添加动画的时候，记得要给定位属性设置初始值，否则第一次动画无效

七、动画类库

1、实现页面滚动时元素动画

wowjs

这个需要两个文件，一个用的是 animate.css，一个是wowjs

npm i wowjs --save 会附带一份 animate.css 但是是2013年的版本的，可以直接去animate.css官网下载最新的
- 注意：最新的 animate.css 和之前版本的 animate.css 动画的 class发生了改变，用最新css的话要去官网复制最新的 class 名
- html 页面使用的时候直接 new WOW().init() 构造函数的 option 选项自己查一下
- 模块化开发的话导入构造函数在 new WOW().init()
jquery-aniview: 依赖于jquery.js 和 animate.css

也很好用，但是没有wowjs简单

八、常见动画

1、确定型进度条

  <style>

  .item {
          display: inline-block;
          height: 20px;
          background-image: linear-gradient(90deg,#edf0f3 25%,#f7f8f8 37%,#edf0f3 63%);
          background-size: 400% 100%;
          background-position: 100% 50%;
          border-radius: 4px;
          animation: skeleton-loading 1.5s ease-in-out infinite;
      }

      @keyframes skeleton-loading {
          0% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0 50%;
          }
      }

    </style>

    <div class="item" style="width: 232px;">