How can I use CSS animations in SASS? -
i'm trying add simple css animation bootstrap links in rails, i'm having trouble. here's what's breaking:
$link-color-hover: rgba(85, 85, 85, .3); :hover, :focus, :active { -webkit-transition-delay: 0s; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease; color: darken(#777, 50%); }
any here? possible?
try this:
@mixin hovertransition { $link-color-hover: rgba(85, 85, 85, .3); color:$link-color-hover; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease; &:hover, &:focus, &:active { color: darken(#777, 50%); } } .transition-link { @include hovertransition; }
html
<a href="#" class="transition-link">test me</a>
you dont need define new mixin, clean things up. transition ment defined in declaration of element, before tranisition ist triggered. p.s dont forget other prefixes.
here demo: http://jsfiddle.net/wzagr/
Comments
Post a Comment