动画不工作 CSS
Animation does not work CSS
我正在尝试为 CSS class 添加一些动画
这是代码:
#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;
尝试在没有应用悬停的情况下在元素上放置过渡:
#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;
}
将此代码添加到您的 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
示例:
我正在尝试为 CSS class 添加一些动画 这是代码:
#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;
尝试在没有应用悬停的情况下在元素上放置过渡:
#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;
}
将此代码添加到您的 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
示例: