Sass and Keyframes

Question

I'm trying to create a spinning circle using css keyframes, but I'm having difficulty trying to get this to work in Sass.

Here's my html:

<div class="content">
    <h1 class="h1">Playing around with keyframes</h1>
    <div class="circle"></div>
</div>

and here's the Sass:

.content{
        display:block;
        position: relative;
        box-sizing:border-box;

        .circle{
            width: 220px;
            height: 220px;
            border-radius: 50%;
            padding: 10px;
            border-top: 2px solid $pink;
            border-right: 2px solid $pink;
            border-bottom: 2px solid $pink;
            border-left: 2px solid #fff;
            -webkit-animation:spin 4s linear infinite;
            -moz-animation:spin 4s linear infinite;
            animation:spin 4s linear infinite;
        }

        @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
        @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
        @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    }

I'm using Prepros to compile my Sass and the output looks like this (note the classes inside the keyframes):

@-moz-keyframes spin {
  .lesson-page .content 100%  {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  .lesson-page .content 100%  {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  .lesson-page .content 100%  {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Works for me - http://sassmeister.com/gist/afdfecff8e5230d19403 — Paulie_D, Oct 02 '14 at 15:43
Oh interesting! At least I know I was on the right lines. Thanks :) — Hannah Goodridge, Oct 02 '14 at 15:51

score 1 · Accepted Answer · edited May 23 '17 at 10:28

This appears to be specific to Sass 3.3. The @keyframes constructs are not correctly bubbling to the top as they should. If upgrading to 3.4 is not an option, simply stop nesting your keyframes.

.content{
    display:block;
    position: relative;
    box-sizing:border-box;

    .circle{
        width: 220px;
        height: 220px;
        border-radius: 50%;
        padding: 10px;
        border-top: 2px solid $pink;
        border-right: 2px solid $pink;
        border-bottom: 2px solid $pink;
        border-left: 2px solid #fff;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Related: How to make a Sass mixin declare a non-nested selector on base level?

Sass and Keyframes

1 Answers1