html - CSS 动画不起作用

Question

为什么 css 动画在我的代码中不起作用。当我想悬停我的链接时。

.floridabt-nav .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
    background-color: transparent;
    color: #f9dd04;
    transition: all 0.3s ease;
}
.floridabt-nav .dropdown-menu>li>a:focus:before, .dropdown-menu>li>a:hover:before{
    content: "\2192";
    color: #222222;
    padding-right: 10px;
    -moz-transition: padding-right .3s ease-in;
    -o-transition: padding-right  .3s ease-in;
    -webkit-transition: padding-right  .3s ease-in;
    transition: padding-right  .3s ease-in; 
}

Answer 1

看片段。现在过渡有效。

1. ul 在选择器中丢失
2. 第一个 css 规则需要任何 padding 的声明
3. 你必须将 transition 声明放入第一个规则中(不在悬停或焦点下)
4. 在第二个 css 规则中你必须使用 padding 而不是 padding-right
5. 在第二个 css 规则中你不需要 transition 声明

希望对您有所帮助。

.floridabt-nav .dropdown-menu>ul>li>a, .dropdown-menu>ul>li>a{
	background-color: transparent;
	color: #f9dd04;
	-moz-transition: padding 0.3s ease-in;
	-o-transition: padding 0.3s ease-in;
	-webkit-transition: padding 0.3s ease-in;
	transition: padding 0.3s ease-in; 
	padding: inherit;
}
.floridabt-nav .dropdown-menu>ul>li>a:focus, .dropdown-menu>ul>li>a:hover{
	color: #222222;
	padding: 10px;
}

<div class="floridabt-nav">
	<div class="dropdown-menu">
		<ul>
			<li>
				<a href="#">PADDING TRANSITION</a>
			</li>
		</ul>
	</div>
</div>