Interpolation with @each directive in CSS3 @keyframes

Showing 1-5 of 5 messages
Interpolation with @each directive in CSS3 @keyframes Phil LaPier 6/24/11 11:05 PM
Mozilla 5 now support CSS3 Keyframes for animation—as does webkit.
They both require vedor specific prefixes to work.
@-webkit-keyframes name { }
@-moz-keyframes name { }

I'm trying to write the follow sass directive so that I don't have to
create duplicate keyframe rule sets:

$vendors: '@-webkit', '@-moz';

@each $vendor in $vendors {
  #{$vendor}-keyframes slideup {
    from {
      -webkit-transform: translateY(250px);
    }
    to {
      -webkit-transform: translateY(0px);
    }
  }
}

Sass 3.2 spits out the following: error sass/_directives.scss (Line
17: Invalid CSS after "": expected selector, was "@-webkit-keyfra...")

Is there a current workaround for this? It would be nice to have sass
support @keyframes.
W3C Spec: http://www.w3.org/TR/css3-animations/
Re: Interpolation with @each directive in CSS3 @keyframes Eric M. Suzanne 6/25/11 4:58 PM
I work around a similar issue with:

@mixin slideup {
  property: value;
  property: value;
}

@-moz-keyframe-slideup {
  @include slideup;
{
 
@-webkit-keyframe-slideup {
  @include slideup;
{
 
That way, while you do need to repeat the browser-specific declarations, at least you aren't repeating the definition of your keyframes. There is a proposal floating around for a better method to handle animations, but it may be some time before that is built.

Cheers,
Eric
Re: Interpolation with @each directive in CSS3 @keyframes Phil LaPier 6/26/11 4:40 PM
Thanks for the response Eric.
Though not the cleanest solution, it'll due for now.

Phil
Re: Interpolation with @each directive in CSS3 @keyframes Ian Storm Taylor 8/13/12 7:12 PM
+1 on this. I have a very similar situation, except my properties require vendor prefixes as well:


$vendors: '-webkit-' '-o-' '-moz-' ''

@each $vendor in $vendors
    @#{$vendor}keyframes bounce
        0%,
        20%,
        50%,
        80%,
        100%
            #{$vendor}transform: translateY(0)
        40%
            #{$vendor}transform: translateY(-30px)
        60%
            #{$vendor}transform: translateY(-15px)

.bounce
    +animation-name(bounce)






On Sunday, June 26, 2011 4:40:16 PM UTC-7, Phil LaPier wrote:
Thanks for the response Eric.
Though not the cleanest solution, it'll due for now.

Phil

On Jun 25, 7:58 pm, Eric Meyer wrote:
> I work around a similar issue with:
>
> @mixin slideup {
>   property: value;
>   property: value;
>
> }
>
> @-moz-keyframe-slideup {
>   @include slideup;
> {
>
> @-webkit-keyframe-slideup {
>   @include slideup;
> {
>
> That way, while you do need to repeat the browser-specific declarations, at
> least you aren't repeating the definition of your keyframes. There is a
> proposal floating around for a better method to handle animations, but it
> may be some time before that is built.
>
> Cheers,
> Eric
Re: Interpolation with @each directive in CSS3 @keyframes Eric M. Suzanne 1/5/13 10:17 AM
We've already built an animation module that handles all this much more simply:

https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_animation.scss

You can easier use the master branch, or the plugin that it originated in (compass-animation), or just copy/paste.

More support for '@' would be an issue for Sass, not Compass.

Cheers,
-e


On Wednesday, January 2, 2013 7:00:40 AM UTC-7, EquiValent wrote:
+1 for a way to put @ symbol http://stackoverflow.com/questions/14076063/how-to-output-at-in-sass