为什么这两个元素不会同时转换？答案

【问题标题】：Why do these 2 elements not transition at the same time?为什么这两个元素不会同时转换？
【发布时间】：2018-05-31 11:39:09
【问题描述】：

我有一个带有 2 个伪元素（.card-title::before 和 .card-title::after）的元素，其过渡将宽度从 0px 更改为 40px。

原来的过渡速度是0.5s，但为了演示，我把它改成了15s，这样你就可以清楚地看到::before伪元素在::after之前开始。

如果您没有看到，请尝试在整页中打开代码片段。

为什么会这样？我该如何解决？

我可以通过向::before 添加一个非常短的（例如 0.05 秒）延迟来解决它，但我想你可以理解我为什么不喜欢这个想法。

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #eee;
}

.card {
	height: 100px;
	width: 100px;
}

.card-body {
	color: white;
	height: 100%;
	background: #777;
}

.card-title {
	position: relative;
	background: yellow;
	height: 45px;
}

.card-title::before {
	content: '';
	position: absolute;
	background: red;
	width: 0;
	top: 0;
	bottom: 0;
	right: 100%;
	z-index: -1;
	transition: width 15s linear;
}

.card-title::after {
	content: '';
	position: absolute;
	background: red;
	width: 0;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: -1;
	transition: width 15s linear;
}

/* Hover effect */
.card-body:hover .card-title::before,
.card-body:hover .card-title::after {
	width: 40px;
}

<div class="card">
	<div class="card-body">
		<h3 class="card-title"></h3>
	</div>
</div>

【问题讨论】：

仅仅因为一个被称为 before 而另一个被称为 after :p
顺便说一句，chrome 对我来说都是同时开始的......它只发生在 FF 上
只在Chrome里面运行代码sn-p，而不是当整页或者复制sn-p回答 i> & 编辑...
在 Safari 11.0.1 上，两个动画同时开始，包括整页和小片段...
@Michał 所以获胜者是 Safari：p

标签： html css css-transitions transition

【解决方案1】：

我不确定，但您的问题可能是由舍入问题引起的，一个过渡向下舍入一个像素，一个向上舍入。

但是，您可以使用transform: scaleX(1); 从更改宽度切换到调整比例，这无论如何都会更高效。以下内容在 Chrome 和 Firefox 中都适用于我。

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #eee;
}

.card {
	height: 100px;
	width: 100px;
}

.card-body {
	color: white;
	height: 100%;
	background: #777;
}

.card-title {
	position: relative;
	background: yellow;
	height: 45px;
}

.card-title::before {
	content: '';
	position: absolute;
	background: red;
	width: 40px;
	top: 0;
	bottom: 0;
	right: 100%;
	z-index: -1;
	transition: transform 15s linear;
	transform: scaleX(0);
	transform-origin: right;
}

.card-title::after {
	content: '';
	position: absolute;
	background: red;
	width: 40px;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: -1;
	transition: transform 15s linear;
	transform: scaleX(0);
	transform-origin: left;
}

/* Hover effect */
.card-body:hover .card-title::before,
.card-body:hover .card-title::after {
	transform: scaleX(1);
}

<div class="card">
	<div class="card-body">
		<h3 class="card-title"></h3>
	</div>
</div>

【讨论】：