夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

    • CSS基础

    • flex布局

    • CSS过渡与动画

      • CSS3之transition过渡
        • transitionend 事件
      • CSS3之animation动画
      • 实现加载中动画
    • Grid网格布局

    • 移动端布局
    • css 变量
    • svg的使用
    • 「布局技巧」图片未加载前自动撑开元素高度
    • 文字在一行或多行时超出显示省略号
    • 从box-sizing属性入手,了解盒子模型
    • 水平垂直居中的几种方式-案例
    • 如何根据系统主题自动响应CSS深色模式
    • Typora样式
    • 隐藏与美化滚动条
    • 多行展开收起自动隐藏
    • placeholder 样式修改
    • 实现按钮右下角勾选样式
    • svh、lvh、dvh
  • 页面
  • CSS
  • CSS过渡与动画
夜猫子
2019-12-25
目录

CSS3之transition过渡

# CSS3 之 transition 过渡

html 结构

<div class="box1">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>
1
2
3
4
5

先给元素设置 transition 过渡,指定样式和时间,这里设置 all 全部样式都采用 0.3s 的过渡

.box1 > div {
  /* 给元素所有变化都添加过渡动画, 也可以指定唯一的过渡样式属性*/
  transition: all 0.3s;
}
/*类似于监听属性的变化,属性变化时,触发动当前属性到变化后的属性的动画,all表示监听所有属性变化*/
1
2
3
4
5

其属性:

1.transition-property 在 transition-property 中我们可以列举要设置动画的所有属性,如:left、margin-left、height 和 color。

不是所有的 CSS 属性都可以使用过渡动画,但是它们中的大多数都是可以的。all 表示应用在所有属性上。

2.transition-duration transition-duration 允许我们指定动画持续的时间。时间的格式参照 CSS 时间格式:单位为秒 s 或者毫秒 ms。

3.transition-delay transition-delay 允许我们设定动画开始前的延迟时间。例如,对于 transition-delay: 1s,动画将会在属性变化发生 1 秒后开始渲染。

鼠标经过元素测试效果

宽度过渡
.div1:hover{width: 150px;}
1

背景色过渡

.div2:hover{background: #999;}
1
按贝塞尔曲线设置的过渡
/*贝塞尔曲线过渡*/
.div3{transition-timing-function: cubic-bezier(.39,.62,.74,1.39)}
.div3:hover{transform: translate3d(-25px, -25px, 0)}
1
2
3

# 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果,比如反弹效果等 X轴的范围是0~1,Y轴的取值没有规定,但是也不宜过大。 如:直线linear,即cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具:https://cubic-bezier.com/#.17,.67,.83,.67

参考:https://www.w3school.com.cn/css3/index.asp

# transitionend 事件

CSS 动画完成后,会触发 transitionend 事件。

这被广泛用于在动画结束后执行某种操作。我们也可以用它来串联动画。

举例来说,下面的小船会在点击后向右浮动,然后再回来。而且,每一次都会向右移动地更远一点:

See the Pen Untitled by Dark Cat (@yemao-zi) on CodePen.

这个动画通过 go 函数初始化,并且在每次动画完成后都会重复执行,并转变方向:

boat.onclick = function() {
  //...
  let times = 1;

  function go() {
    if (times % 2) {
      // 向右移动
      boat.classList.remove('back');
      boat.style.marginLeft = 100 * times + 200 + 'px';
    } else {
      // 向左移动
      boat.classList.add('back');
      boat.style.marginLeft = 100 * times - 200 + 'px';
    }

  }

  go();

  boat.addEventListener('transitionend', function() {
    times++;
    go();
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

transitionend 的事件对象有几个特定的属性:

event.propertyName :当前完成动画的属性,这在我们同时为多个属性加上动画时会很有用。

event.elapsedTime :动画完成的时间(按秒计算),不包括 transition-delay。

编辑 (opens new window)
上次更新: 2023/7/11 18:57:41
flex布局和overflow一起使用超出滚动失效
CSS3之animation动画

← flex布局和overflow一起使用超出滚动失效 CSS3之animation动画→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式