# transition 过渡动画与 animation 自定义动画

TIP

transition 过渡动画、animation 自定义动画，无论在 PC 端、还是移动端项目开发中都是高频常用的动画，对于交互体验的提升都有很大的帮助。因此，学好动画相关知识及灵活应用就非常重要。

# 一、transition 过渡动画

如何理解过渡动画？

一个元素由 A 状态经过一段时间变化成 B 状态，我们只需要定义其开始和结束的状态，而他的中间的状态会自己添加“补间动画”。如下图：

以前，网页的特效基本都是由 JavaScript 定时器实现的，现在逐步改为使用 CSS3 过渡
优点：动画更细腻，内存开销小
兼容性：移动 PC 都兼容，但是需要加上对应的浏览器前缀

过渡动画何时发生？

当属性值发生变化时，才会触发 transition 动画
transition 动画主要与:hover 配合，来实现鼠标滑动动画效果

# 1、transition 基本语法

语法

/* 
	[] 表示这个值，可以省略不写
	css属性名  过渡时间   时间函数  延迟时间 
*/
transition: transition-property transition-duration [transition-timing-function]
  [transition-delay];

属性	描述
`transition-property`	指定 CSS 属性的 name，哪些属性要过渡
`transition-duration`	transition 效果需要指定多少秒或毫秒才能完成，动画时间
`transition-timing-function`	指定 transition 效果的转速曲线，变化曲线
`transition-delay`	定义 transition 效果开始的时候（延迟时间）

用法

/* 
    width : 过渡属性为width
    1s : 动画时长1秒
    linear : 直线匀速动动
    0s : 延迟时间,不延迟
*/
transition: width 1s linear 0s;
transition: width 1s;
transition: width 1s linear;
transition: width 1s 2s;

实际应用

<style type="text/css">
  div {
    width: 100px;
    height: 100px;
    background: tomato;
    /* 
            transition：定义过渡动画
            border-radius：过渡的css属性
            1s ：动画过渡时间
            ease： 速度慢快慢
            0s ：延迟时间0s 
        */
    transition: border-radius 1s ease 0s;
    margin: 50px 10px;
  }
  .box:hover {
    border-radius: 50%;
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-26-13-39-01

# 2、可参于过渡的属性

可参于过渡的属性

所有数值类型的属性，都可以参与过渡
比如：width、height、left、top、border-radius、font-size、opacity
背景颜色和文字都可以被过渡
所有的变形（包括 2D 和 3D）都能被过渡，在 CSS 中 90%的属性都可以被过渡

不能参与过渡动画的属性

float 和 position 不能
display 无法过渡
font-family 等

/* 
	错误用法 
	display属性是不可以参于过渡动画的
*/
transition: display 1s ease 0s;

# 3、all 这个特殊属性

TIP

需要所有属性参与过渡，即定义为 all
all 属性不要随意使用，会引发效率问题，如果只需要某一个属性过渡，还是要指定特定的属性

/*
    all: 所有属性
    1s: 动画过渡时间为1s
    linear: 匀速动动
    0s: 动画延迟时间0s
*/
transition: all 1s linear 0s;

应用

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: salmon;
    border-radius: 0;
    /* 
            all: 所有能过的渡的属性，发生改变时，都会发生过渡效果
            1s: 动画过渡时间为1s
            linear: 动画习速运动
            0s: 延迟时间
        */
    transition: all 1s linear 0s;
  }
  .box:hover {
    /* 宽、高、背景颜色、圆角都是可过渡属性，所以鼠标滑动后，都能呈现过渡变化效果 */
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 50%;
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-26-14-10-55

# 4、定义多个过渡动画

TIP

多个过渡动画之间用 ,（逗号）隔开

语法

transition: 属性 过渡时间 时间函数 延迟时间, 属性 过渡时间 时间函数 延迟时间,
  属性 过渡时间 时间函数 延迟时间;

应用

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    /* 
            动画1： 宽度变化
            动画2：延迟1s后，高度发生变化
            动画3：延吃2s后，透明度发生变化
        */
    transition: width 1s linear 0s, height 1s ease 1s, opacity 1s linear 2s;
  }
  /* 鼠标滑动后，改变宽，高，透明度 */
  .box:hover {
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-26-14-23-19

# 5、过渡的四个小属性

TIP

前面我们学过 transition 这个属性，本质上 transition 这个属性是以下四个小属性的复合写法。

属性	描述
`transition-property`	指定 CSS 属性的 name，哪些属性要过渡
`transition-duration`	指定动画多少秒或毫秒才能完成，动画执行时间
`transition-timing-function`	时间函数，指定动画转速曲线，即变化的速度
`transition-delay`	指定动画开始前，需要的延迟时间

多个值之间用 ,（逗号）隔开，没有指定的值，以属性的第一个值为准

transition-property: width, height;
transition-duration: 1s, 2s;
transition-timing-function: linear;
transition-delay: 0s, 1s;

小属性主要是用来层叠大属性用的。

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    /* 
            all: 所有能参于过渡的属性，都可参与过渡动画
            1s: 过渡时间1s
        */
    transition: all 1s;
    /* 过渡属性: 宽,高，不透明度 */
    transition-property: width, height, opacity;
    /* 过渡时间：
        	width 1s 
        	height 2s 
        	opacity 1s 
        */
    transition-duration: 1s, 2s;
    /* 
        	过渡延迟时间：
            0s：width宽过渡时间
            1s：height高过渡时间 
            2s：opacity不透明度过渡时间
        */
    transition-delay: 0s, 1s, 2s;
  }
  .box:hover {
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-26-14-39-34

# 6、时间函数

TIP

时间函数（transition-timing-function），管理着动画在单位帧内播放的速度曲线

时间函数的预设值

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

常用参数

横轴表示时间，纵轴表示变化量 .越斗表示运动速度越快。

贝塞尔曲线

官方网址：https://cubic-bezier.com/ (opens new window) 可以在线生成贝塞尔曲线，可以自定义动画时间函数

我们可以右击审查元素，在代码的控面板当中来调整贝塞尔曲线，来调节运动速度，如下

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 过渡动画 */
    transition: width 1s linear;
  }
  .box:hover {
    width: 200px;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 二、transition 过渡动画实战案例

TIP

项目中常用的动画实践案例

# 1、鼠标滑动，背景从透明到半透明效果

GIF-2022-7-26-16-19-50

点击查看完整源代码

<style>
  .box {
    width: 200px;
    height: 200px;
    position: relative;
  }
  .box img {
    width: 200px;
    height: 200px;
    /* 图片填充方式:图片等宽高覆盖内容框 */
    object-fit: cover;
  }
  .box::after {
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    /* 背景颜色完全透明 刚开始看不到*/
    background-color: rgba(0, 0, 0, 0);
    /* 过渡动画*/
    transition: background-color 1s;
  }
  .box:hover::after {
    /* 背景颜色不透明度为0.5 */
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>
<body>
  <div class="box">
    <img src="./images/pic1.jpg" alt="" />
  </div>
</body>

# 2、鼠标滑动，文字从下往上滑动效果

GIF-2022-7-26-16-18-26

点击查看完整源代码

<style>
  body,
  p {
    margin: 0;
  }
  .box {
    width: 200px;
    height: 200px;
    position: relative;
    /* 超出部分隐藏 */
    overflow: hidden;
  }
  .box img {
    width: 200px;
    height: 200px;
    /* 图片等宽高填充内容区 */
    object-fit: cover;
  }
  .box p {
    /* 绝对定位 */
    position: absolute;
    left: 0px;
    /* 最开始定位到父元素外边看不到 */
    bottom: -35px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    /* 过渡动画 */
    transition: bottom 0.5s;
  }
  .box:hover p {
    bottom: 0px;
  }
</style>
<body>
  <div class="box">
    <img src="./images/pic1.jpg" alt="" />
    <p>上帝散落的光</p>
  </div>
</body>

# 3、商城右侧通栏导航

GIF-2022-7-26-17-11-02

点击查看完整源代码

<!-- 引用阿里矢量图标 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
  /* 清除默认样式 */
  body {
    margin: 0;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* 侧边栏固定定位在浏览器最右边 */
  .siderbar {
    width: 5px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #666;
  }
  .siderbar ul {
    width: 50px;
    height: 208px;
    /* background-color: red; */
    /* 绝对定位在侧边栏垂直居中位置 */
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: -104px;
  }
  .siderbar ul li {
    width: 50px;
    height: 50px;
    margin: 2px 0px;
    background-color: #666;
    /* 相对定位 */
    position: relative;
  }
  .siderbar ul li i {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #666;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
  .siderbar ul li span {
    display: block;
    /* 最开始隐藏不见，即width为0，同时overflow:hidden */
    width: 0px;
    overflow: hidden;
    height: 50px;
    /* 相对li绝对定位，元素的最右边与li的最左边对齐 */
    position: absolute;
    top: 0;
    right: 50px;
    background-color: #666;
    color: #fff;
    /* 文字首行缩进20px */
    text-indent: 20px;
    line-height: 50px;
    /* 宽度过渡动画效果 */
    transition: width 1s;
  }
  .siderbar ul li:hover i {
    background-color: red;
  }
  /* 鼠标滑动到li ，改变span的宽和背景颜色*/
  .siderbar ul li:hover span {
    width: 120px;
    background-color: red;
  }
</style>
<body>
  <div class="siderbar">
    <ul>
      <li>
        <i class="iconfont icon-xiaoxixinxihuihuahuida"></i>
        <span>联系客服</span>
      </li>
      <li>
        <i class="iconfont icon-jurassic_user"></i>
        <span>京东会员</span>
      </li>
      <li>
        <i class="iconfont icon-gouwuche"></i>
        <span>购物车</span>
      </li>
      <li>
        <i class="iconfont icon-wodeyouhuiquan"></i>
        <span>优惠券</span>
      </li>
    </ul>
  </div>
</body>

# 三、animation 自定义动画

TIP

我们需要使用自定义动画，需要分两步：

第一步是：定义动画
第二步是：调用动画

# 1、动画的定义

使用`@keyframes`关键帧来定义动画

建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您可以多次更改 CSS 样式的设定。
动画执行各阶段时间，可以通过百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"。
from 和 to 等价于 0% 和 100%。from 和 0% 是动画的开始时间，to 和 100% 动画的结束时间。

@keyframes  动画名 {
    /* 起始状态 */
    from {  样式   }
    /* 结束状态 */
    to {  样式  }
}

/* 或 */

@keyframes  动画名 {
    /* 起始状态 */
	0% {  样式   }
	/* 结束状态 */
	100% {  样式  }
}

定义一个动画

/* 
    @keyframes 表示定义动画
    changeBox:动画的名字
    0% ：表示起始状态
    100% :表示结束状态 
*/

@keyframes changeBox {
  0% {
    width: 200px;
    height: 200px;
  }
  100% {
    width: 400px;
    height: 400px;
  }
}

# 2、调用动画

TIP

动画定义好之后，我们需要使用 animation 属性来调用动画

animation: 动画名 动画完成时间 时间函数 延迟时间;

/*
	changeBox 动画的名字
	1s 总时长
	linear 缓动效果
	0s 延迟时间
*/
animation: changeBox 1s linear 0s;

案例

点击查看完整源代码

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: red;
    /* 调用动画：动画名 动画执行时间; */
    animation: changeBox 5s;
  }
  /* 定义动画 动画名为 changeBox */
  @keyframes changeBox {
    /*
     0% {
      width: 50px;
      height: 50px;
    }

    100% {
      width: 200px;
      height: 200px;
    } 
    */

    /* 起始状态 */
    from {
      width: 50px;
      height: 50px;
    }
    /* 结束状态 */
    to {
      width: 200px;
      height: 200px;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-30-22-47-57

# 3、多关键帧动画

TIP

用百分比%，分别表示动画执行的时间节点

点击查看完整源代码

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;
    /* 
        调用动画
        mymove 动画名
        4s 动画执行时间
        ease 动画速度 
        0s 动画延迟时间
    */
    animation: mymove 4s ease 0s;
  }

  @keyframes mymove {
    /* 起始状态 0s */
    0% {
      top: 0px;
      left: 0px;
      background: red;
    }
    /* 1秒后 */
    25% {
      top: 0px;
      left: 100px;
      background: blue;
    }
    /* 2秒后 */
    50% {
      top: 100px;
      left: 100px;
      background: yellow;
    }
    /* 3秒后 */
    75% {
      top: 100px;
      left: 0px;
      background: green;
    }
    /* 4秒 结束状态 */
    100% {
      top: 0px;
      left: 0px;
      background: red;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-26-17-38-18

# 4、animation 完整写法

TIP

animation 这个属性，相当于是下面表格中所有属性的复合写法。

语法

animation: 动画名 动画完成时间 时间函数 延迟时间 播放次数 是否返向播放
  动画不播放或完成时的状态 动画是否正在运行或已暂停;

属性	说明	属性值
animation-name	指定应用的一系列动画名，即@keyframes 定义的动画名	none 表示不调用动画动画名：由大小写敏感的字母 a-z、数字 0-9、下划线 (_) 和/或横线 (-) 组成。不能以数字开头
animation-duration	指定动画周期时长，需要多少秒或毫秒完成	默认值为 0s，表示无动画。时长单位为秒（s)或者毫秒（ms）如: 1s ，2s
animation-timing-function	设置动画将如何完成一个周期	linear（直线匀速） ease（慢-快-慢） ease-in（慢-快） ease-out（快-慢） ease-in-out（慢-快-慢）贝塞尔函数表示 cubic-bezier(0.84,-0.21, 1,-0.15) steps(n,start\|end)
animation-delay	设置动画在启动前的延迟间隔时间	默认值为 0s,表示立即执行时长单位为秒（s)或者毫秒（ms）如: 1s ，2s
animation-iteration-count	定义动画的播放次数。	n：一个数字，动画播放次数 infinite：无限次播放
animation-direction	指定是否应该轮流反向播放动画。	`normal`：默认值。动画正常播放 `reverse` :动画反向播放，动画按步后退的效果 `alternate`：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 `alternate-reverse` : 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	`none`: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 `forwards`: 在动画结束后，动画将停止在最后结束的状态 `backwards`: `both` : 动画遵循 `forwards` 和 `backwards` 的规则。也就是说，动画会在两个方向上扩展动画属性
animation-play-state	指定动画是否正在运行或已暂停。	`paused` 暂停动画 `running` 正在运行动画

① animation-iteration-count 动画播放次数

n：一个数字，动画播放次数
infinite：无限次播放

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    left: 0;
    top: 0;
    /* 动画名 执行时间 匀速 延迟0s 执行2次*/
    /* animation: mymove 2s linear 0s 2; */
    /* infinite 无限循环 */
    animation: mymove 2s linear 0s infinite;
  }
  @keyframes mymove {
    0% {
      top: 0;
      left: 0;
    }
    50% {
      top: 0px;
      left: 200px;
    }
    100% {
      top: 200px;
      left: 200px;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-30-23-11-33

② animation-direction 指定是否应该轮流反向播放动画

normal：默认值。动画正常播放
reverse :动画反向播放，动画按步后退的效果
alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse : 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: 0;
    /* 动画名 执行时间 匀速 延迟0s  播放次数2次  奇数次正向播，偶数反向播 */
    animation: mymove 2s linear 0s 2 alternate;
  }
  @keyframes mymove {
    /* 0s 开始 */
    0% {
      top: 0;
      left: 0;
    }
    /* 1s 后*/
    50% {
      top: 0px;
      left: 200px;
    }
    /* 2s 后*/
    100% {
      top: 200px;
      left: 200px;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

reverse	alternate	alternate-reverse

③ animation-fill-mode 动画不播放或完成或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards: 在动画结束后，动画将停止在最后结束的状态
backwards:在动画结束后，动画将停止在最开始的状态
both : 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    left: 0;
    top: 0;
    /* 动画名 执行时间 匀速 延迟0s */
    animation: mymove 2s linear 0s 2 forwards;
  }
  @keyframes mymove {
    0% {
      top: 100px;
      left: 0;
      color: yellow;
    }
    50% {
      top: 0px;
      left: 200px;
    }
    100% {
      top: 200px;
      left: 200px;
    }
  }
</style>
<body>
  <div class="box">我是大美人</div>
</body>

forwards	backwards

④ animation-play-state 指定动画是否正在运行或已暂停

属性值	说明
paused	暂停动画
running	正在运行动画

animation-play-state通常与:hover配合来使用，当鼠标滑动上去时，可以暂停或开启动画

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    left: 0;
    top: 0;
    /* 动画名 执行时间 匀速 延迟0s */
    animation: mymove 5s linear 0s 1;
  }
  @keyframes mymove {
    0% {
      top: 0;
      left: 0;
      color: yellow;
    }
    50% {
      top: 0px;
      left: 200px;
    }
    100% {
      top: 200px;
      left: 200px;
    }
  }
  /* 鼠标滑动上去,暂停动画执行 */
  .box:hover {
    animation-play-state: paused;
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-30-23-37-25

# 5、animation 指定多组动画

TIP

animation 属性用来指定一组或多组动画，每组之间用**逗号 , **相隔。

animation: move1 2s, bgcolor 2s 2s forwards;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* 
        move1 :动画1 执行时间2s
        bgcolor:动画2 执行时间2s  延迟2s执行,执行后动画停止在结束的状态
     */
    animation: move1 2s, bgcolor 2s 2s forwards;
  }
  @keyframes move1 {
    0% {
      width: 100px;
      height: 100px;
    }
    100% {
      width: 200px;
      height: 200px;
    }
  }

  @keyframes bgcolor {
    0% {
      width: 200px;
      height: 200px;
      background-color: khaki;
    }
    100% {
      background-color: red;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF-2022-7-30-23-45-33

# 6、steps 帧动画

TIP

steps 定义一个动画从开始到结束，动画的每一帧中经历的步数

语法

/*
	n: 整数，表示分几步执行完
	start：开始是在第一帧动画结束的位置
	end：开始是在第一帧动画开始的位置
*/
steps(n,start|end)

<style>
  body {
    margin: 0;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    /* 分五步,第一步在第一帧结束的位置 */
    animation: move 5s steps(5, start);
  }
  @keyframes move {
    0% {
      left: 0;
    }
    100% {
      left: 500px;
    }
  }
  /* 这个是用来做参考的,参考500px的位置在哪里 */
  .box2 {
    width: 500px;
    background-color: red;
    height: 20px;
  }
</style>
<body>
  <div class="box"></div>
  <div class="box2"></div>
</body>

steps(5,end)	steps(5,start)

steps 的特殊性

steps是设置的每一步动画的跳跃步数，而不是整个动画的跳跃步数，具体看下面这个案例

<style>
  body {
    margin: 0;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: rgb(138, 210, 238, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    /* 分五步,第一步在第一帧结束的位置 */
    animation: move 5s steps(5, start);
  }
  @keyframes move {
    0% {
      left: 0;
    }
    50% {
      left: 100px;
    }
    100% {
      left: 500px;
    }
  }
  /* 这个是用来做参考的,参考500px的位置在哪里 */
  .box2 {
    width: 500px;
    background-color: red;
    height: 20px;
  }
  /* 这个是用来做参考的,参考100px的位置在哪里 */
  .box3 {
    width: 100px;
    background-color: khaki;
    height: 10px;
  }
</style>
<body>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

GIF-2022-7-30-23-57-47

steps 帧动画实战案例

GIF-2022-7-26-19-53-12

<style type="text/css">
  html,
  body {
    margin: 0;
    padding: 0;
  }
  .box {
    width: 184px;
    height: 325px;
    margin: 50px auto;
    background-image: url("images/people.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    animation: move 1s steps(8, end) 0s infinite;
  }
  @keyframes move {
    0% {
      background-position: 0px 0px;
    }

    100% {
      background-position: -1472px 0px;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

# 7、transition 与 animation 的区别

区别

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 @keyframe 结合可以设置中间帧的一个状态
2、animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧（开始和结束）；

# 四、animate.css 动画库

TIP

animate.css 是非常强大的跨平台的预设 css3 动画库
内置了很多典型的 css3 动画，兼容性好使用方便
animate.css 官网：https://animate.style/ (opens new window)

# 1、深入学习 animate.css 动画库官网

TIP

点击网站 (opens new window) 右侧的导航，就能显示出对应的动画效果，如下图：

如果国外网站打不开，可以去 BootCDN 下载，往后看，我在后面提供了 BootCDN 的相关的操作步骤。

GIF-2022-7-31-0-24-32

# 2、下载 animate.css 文件

# 3、在页面引入 animate.css 文件

<!--引用时，要注意引用入的地址 -->
<link rel="stylesheet" href="./css/animate.css" />

# 4、选择对应动画效果应用

TIP

在网站的右侧选择你需要的效果，然后把对应的效果应用到自己的元素上。
需要应用那个样式效果，在需要应用的元素上加 .animate__animated和需要的效果样式名就 ok
效果的样式名，在英文官网的样式标题上有个复制的小按扭，点击小按扭复制就可以获得

<!-- 应用  bounce 这个样式效果 -->
<div class="box animate__animated animate__bounce"></div>

# 5、BootCDN 上下载 animate.css 文件

TIP

BootCDN 官网地址：https://www.bootcdn.cn/ (opens new window)

# 五、专项案例训练（作业）

根据课程进度完成以下针对性案例开发，开发过程要求：

利用 PS（Photoshop）与 PxCook 结合，在 PS 中的找到 PxCook-切图面板，选中想要切图的图层或者 图层组 ，然后点击切图面板上的 标记为切图 按钮 -> 再导出到 PxCook
在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材
开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸，到具体的开发过程，包括平时自学中如果没有 PSD 源文件时，PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中（更多是团队协作开发，流程如下）

设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖（国内企业用的多）中
前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后，会有 3 大项目开发（PC 端，响应式，移动端）会按照企业真实团队协作的方式，用 3 个项目来完整的实践。

PSD 的源文件设计稿（联系助理老师获取即可）

具体操作步骤讲解，在钉钉群直播回放视频（第十二课：CSS 盒子模型）中可查阅

切记

学习阶段一定要按照以上的流程学习，提前熟悉工具和整个开发步骤，企业真实项目开发就是这样的流程

# 1、CSS3 网站全屏加载动画

CSS3网站全屏加载动画

点击查看完整版视频讲解

← 圆角、阴影、文本图像处理、CSS 函数 transform 2D 与 3D 转换 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料