CODEWITHSUNDEEP
csssasshamlcss-animations
MikaAK
MikaAK

Reputation: 2364

Animations wont run

I'm trying to run some animations in scss and I'm running into difficulty. In chrome dev tools it shows my element has the correct animation set and I've even copy pasted the keyframes rule into codepen and tried it there and it worked, yet when I run it in my website it doesn't work. I've been stuck with this for hours.

Here is a fiddle demonstraiting: http://jsfiddle.net/58xrZ/1/

This was written in Scss and HAML and is as follows 

ul.tab-selection {
      width: 38.338926174%;
      float: right;
      position: relative;
      min-height: 20em;

      li {
        text-align: center;
        height: 6em;
        width: 6em;
        border-radius: 50%;
        position: absolute;

        &:first-child {
          background : radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
          top: 0;
          right: 50%;
          margin-right: -50px;      
          animation-name: first;
          animation-duration: 3s;
          -webkit-animation-name: first;
          -webkit-animation-duration: 3s;
          a {
            width: 4em;
            padding: 2em 1em
          }
        }

        &:not(:first-child){
          bottom: 1.5em;
        }


        &:nth-child(2) {
          background: radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          background: -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          background: -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
          filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
        }

        &:last-child {
          background : radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
          filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
          right: 0;
          a {
            left: 3px;
            padding: 2em 1em;
          }
        }

        a {
          position: absolute;
          right: 0;
          left: 0;
          top: 0;
          font-family: 'Lora', serif;
          color: #AE843D;
          text-shadow: 0 -1px 0 black;
          padding: 1.5em 1em;

          &:hover {
            color: #3D6F51;
          }
        }
      }
    }

and in Haml

%ul.tab-selection
  %li.active.current-projects
    %a{ :href => '#current-projects', 'data-toggle' => 'tab' }
      Current
      %br Projects
  %li.secret
    %a{ :href => '#secret', 'data-toggle' => 'tab' }
      The
      %br
      Secret Shop
  %li.favorite
    %a{ :href => '#favorite', 'data-toggle' => 'tab' }
      Favorite
      %br Links

Upvotes: 0

Views: 64

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

You need to place the keyframes at the bottom of your CSS. You also need to have browser prefixed versions of the @keyframes animation(s) so that when you say -webkit-animation:... for example it will actually go to the @-webkit-keyframes

Demo

It likely only worked in CodePen because it was using a prefixer, which automatically adds prefixes

Upvotes: 1

Related Questions