CSS过渡入门指南

CSS过渡是在CSS中创建动画的最简单方法。在过渡中,您更改属性的值,并告诉CSS根据某些参数将其缓慢更改为最终状态

CSS过渡介绍

CSS过渡是在CSS中创建动画的最简单方法。

在过渡中,您更改属性的值,并告诉CSS根据某些参数将其缓慢更改为最终状态。

CSS过渡由以下属性定义:

财产 描述
transition-property 应该过渡的CSS属性
transition-duration 过渡的持续时间
transition-timing-function 动画使用的计时功能(常用值:线性,缓动)。默认值:缓解
transition-delay 开始动画之前等待的可选秒数

transition属性是一个方便的速记:

.container {
  transition: property duration timing-function delay;
}

CSS过渡示例

这段代码实现了CSS过渡:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two, .four { background: rgba(236, 252, 100, 0.75); }

.circle:hover { background: rgba(142, 92, 205, 0.25); /* lighter */ }

参见故障示例https://glitch.com/edit/#!/flavio-css-transitions-example

悬停时.one.three元素,紫色圆圈,有一个过渡动画可以缓解背景变化,而黄色圆圈则没有,因为它们没有transition属性定义。

过渡计时功能值

transition-timing-function允许指定过渡的加速度曲线。

您可以使用一些简单的值:

价值
线性的
舒适
缓入
缓和
缓入

这个小故障展示了这些在实践中是如何工作的。

您可以使用以下命令创建完全自定义的计时功能三次贝塞尔曲线。这是相当先进的,但基本上上述所有功能都是使用贝塞尔曲线构建的。我们有一些方便的名称,因为它们很常见。

浏览器DevTools中的CSS过渡

浏览器开发工具提供了一种可视化过渡的好方法。

这是Chrome:

Debug CSS Transitions in Chrome DevTools

这是Firefox:

Debug CSS Transitions in Firefox DevTools

在这些面板中,您可以直接在页面中实时编辑过渡和实验,而无需重新加载代码。

可以使用CSS Transitions设置哪些属性的动画

很多!但并非所有CSS属性。

这是完整列表:

财产
背景
背景颜色
背景位置
背景尺寸
边界
边框颜色
边框宽度
底边
边框底色
左下半径半径
右下边界半径
底边宽度
左边框
左边框颜色
左边框宽度
边界半径
右边界
右边框颜色
右边框宽度
边界间距
边界顶
边框顶部颜色
边界左上角半径
边界右上半径
边框宽度
底部
盒子阴影
插入号颜色
夹子
颜色
列数
列间隙
列规则
列规则颜色
列规则宽度
列宽
内容
筛选
柔性
弹性基础
弹性成长
弯曲收缩
字形
字体大小
字体大小调整
字体拉伸
字体粗细
网格区域
网格自动列
网格自动流
网格自动行
网格列端
网格列间隙
网格列开始
网格列
网格间隙
网格行尾
网格行间隙
网格行开始
网格行
网格模板区域
网格模板列
网格模板行
网格模板
网格
高度
剩下
字母间距
行高
利润
底边
左边距
右边距
上边距
最大高度
最大宽度
最小高度
最小宽度
不透明
命令
大纲
轮廓色
轮廓偏移
轮廓宽度
填充
底部填充
左填充
向右填充
顶部填充
看法
透视起源
引号
正确的
标签大小
文字装饰
文字装饰颜色
文字缩进
文字阴影
最佳
变形。
垂直对齐
能见度
宽度
字间距
索引

免费下载我的CSS手册


更多CSS教程: