动画不起作用CSS
我想补充一些动画,我的CSS类 这里是代码:动画不起作用CSS
#primary_nav_wrap li a:hover:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
background-color: #23a298;
bottom: 0;
content: "";
left: 0;
right:0;
margin-left:auto;
margin-right:auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
一切都很好,但是这部分不工作:
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
将此代码添加到您的a:after
#primary_nav_wrap li a:after {
height: 4px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
bottom: 0;
content: "";
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 96px;
width: calc(100% - 15px);
-webkit-transition: background-color 0.4s ease-out;
-moz-transition: background-color 0.4s ease-out;
-o-transition: background-color 0.4s ease-out;
-ms-transition: background-color 0.4s ease-out;
transition: background-color 0.4s ease-out;
}
你不把过渡效果上悬停,另外,你没有提到它的风格应该得到的过渡所以我给了它background-color
例如:
现在,它的工作原理!谢谢 :) – Nedvid
试着将而不施加的悬停元件上的过渡:
#primary_nav_wrap li a:after {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
编辑:您正在更改a
标记的颜色,因此您需要应用该过渡。
#primary_nav_wrap ul a {
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
-o-transition: color 0.4s ease-out;
-ms-transition: color 0.4s ease-out;
transition: color 0.4s ease-out;
}
还有同样的问题 – Nedvid
嗯。说出问题的位置很困难,因为我们在这里只有代码的一部分。如果您创建一个显示问题的[jsfiddle](http://jsfiddle.net),我相信我们可以提供帮助。例如,你的代码不显示“颜色”应用在哪里? – fredrivett
@Nedvid根据您的具体问题更新了工作答案。 – fredrivett
我需要详细说明你的代码。 css,html – zynkn
添加您的HTML代码,以便您可以获得帮助。根据我的知识,你必须对父元素进行转换,并给出你想要在子元素中改变的属性。 –
https://jsfiddle.net/y7mkaq3b/ – Nedvid