為什么關鍵幀 animation 不起作用<a>？</a>

Question

我制作了一個脈沖圓形菜單，其他一切都很好，所以這是我需要添加 animation 的部分

 @import url("https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); @import "compass/css3"; .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #ffffff; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #0081ee; box-shadow: 0 0 0 0 rgba(#0081ee, 0.5); -webkit-animation: pulse 1.5s infinite; }.menu-button:hover { -webkit-animation: none; } @-webkit-keyframes pulse { 0% { @include transform(scale(0.9)); } 70% { @include transform(scale(1)); box-shadow: 0 0 0 50px rgba(#0081ee, 0); } 100% { @include transform(scale(0.9)); box-shadow: 0 0 0 0 rgba(#0081ee, 0); } }

 <a href="" class="menu-button fa fa-bars fa-2x"></a>

但什么也沒發生有什么問題？ 請告訴我

Answer 1

@include規則是 SASS 的一部分，並與 SASS 標識符一起使用。

你的意思是transform屬性。 像這樣使用它：

transform: scale(0.9);