按钮 CSS 过渡无法正常工作答案

【问题标题】：Button CSS Transition not working properly按钮 CSS 过渡无法正常工作
【发布时间】：2020-05-05 12:23:08
【问题描述】：

我有一个按钮，其中包含一些文本和一个很棒的字体图标，该图标在 0.5 秒内旋转 90 度并在悬停时改变颜色。我想要完成的是，当用户悬停按钮时，它应该需要 0.5 秒才能从 90 度旋转回 0 度，而不是立即旋转。我希望平稳过渡回原始状态，而不是立即悬停。

Codepen

<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>

.my-button {
    text-decoration: none;
    color: black;
    padding: .2rem;
    border: 2px solid black;
    transition: all 0.5s ease-in;

    &:hover {
        background-color: blue;
        color: white;
        border: 2px solid red;
    }

    &:hover .fas.fa-arrow-right {
        transform: rotate(90deg);
        transition: transform 0.5s ease 0s;
    }
}

【问题讨论】：

标签： html css button hover css-transitions

【解决方案1】：

你没有指定目标i：

试试这个

.my-button {
  text-decoration: none;
	color: black;
	padding: .2rem;
	border: 2px solid black;
	transition: all 0.5s ease-in-out;
  
  & i{
    transition: all 0.5s ease-in-out;
  }

	&:hover {
		background-color: blue;
		color: white;
		border: 2px solid red;
	}

	&:hover .fas.fa-arrow-right {
		transform: rotate(90deg);
	}
}

【讨论】：