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

TIP

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

# 一、transition 过渡动画

如何理解过渡动画 ?

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

image-20211112215646512

  • 以前,网页的特效基本都是由 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 之间的数值。

常用参数

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

image-20211112224408179

贝塞尔曲线

image-20211206150838690

  • 我们可以右击审查元素,在代码的控面板当中来调整贝塞尔曲线,来调节运动速度,如下
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 过渡动画 */
    transition: width 1s linear;
  }
  .box:hover {
    width: 200px;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220726145203445

# 二、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 : 动画遵循 forwardsbackwards 的规则。也就是说,动画会在两个方向上扩展动画属性
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
GIF-2022-7-30-23-21-36 GIF-2022-7-30-23-26-08 GIF-2022-7-30-23-24-41

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

  • none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  • forwards: 在动画结束后,动画将停止在最后结束的状态
  • backwards:在动画结束后,动画将停止在最开始的状态
  • both : 动画遵循 forwardsbackwards 的规则。也就是说,动画会在两个方向上扩展动画属性
<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
GIF-2022-7-30-23-40-34 GIF-2022-7-30-23-43-26

④ 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)
GIF-2022-7-30-23-51-52 GIF-2022-7-30-23-50-01

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

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

TIP

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

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

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

# 2、下载 animate.css 文件

image-20220731002748824

image-20220731003040959

image-20220731003259426

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

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

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

TIP

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

image-20211113180401684

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

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

image-20220731000650397

image-20220731000952291

# 五、专项案例训练(作业)

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

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

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

在实际企业网页开发中(更多是团队协作开发,流程如下)

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

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

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

  • 具体操作步骤讲解,在钉钉群直播回放视频(第十二课:CSS 盒子模型)中可查阅

切记

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

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

CSS3网站全屏加载动画

点击查看完整版视频讲解
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

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

X