why keyframes animation don't work for <a>?

Question

i make a pulsing circular menu everything else works well, so here is the part where i need to add 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>

but nothing happens what's a problem? tell me please

Answer 1

The @include -rule is part of SASS, and is used with SASS identifiers.

What you mean is the transform -property. Use it like this:

transform: scale(0.9);