CODEWITHSUNDEEP
htmlcsscss-animationsadobe-brackets
terickson001
terickson001

Reputation: 11

CSS3 Animation works in Brackets live preview but not when live on my Site

I am using this spinner on my site.

For those unfamiliar with brackets live preview I believe that the editor serves up the site from a temporary http server and updates whenever there is a change in the code.

Whenever I check the site through this feature the spinner works. the same goes for if I go to my website at www.tylererickson.com within Brackets' custom Google Chrome window, however if opened in a normal Chrome window the spinner doesn't animate.

Any help is aprreciated, thanks in advance.

Code:

    HTML

<div class="loader">
  <div class="inner one"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
</div>

    CSS

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

Upvotes: 0

Views: 1296

Answers (2)

Nima Parsi
Nima Parsi

Reputation: 2110

The reason in Codepen the animation works without the prefixes is because Codepen uses Prefixfree and it automatically applies the needed prefixes for the browser.

You need to add the prefixes either manually or add the Prefixfree jQuery plugin to your page.

I recommend set the prefixes for the loader manually and not with the plugin, the reason is the loading animation should be the first to be loaded in your page and using the prefix plugin means the user has to wait for the jQuery and the prefix plugin to be loaded first, and that will cause a delay in loading the animation.

So add the following prefixes and it will work as expected.

.inner.one {
    -webkit-animation: rotate-one 1s linear infinite;
    -moz-animation: rotate-one 1s linear infinite;
    animation: rotate-one 1s linear infinite;
}
.inner.two {
    -webkit-animation: rotate-two 1s linear infinite;
    -moz-animation: rotate-two 1s linear infinite;
    animation: rotate-two 1s linear infinite;
}
.inner.three {
    -webkit-animation: rotate-three 1s linear infinite;
    -moz-animation: rotate-three 1s linear infinite;
    animation: rotate-three 1s linear infinite;
}

And for the @keyfames:

/*Spinner Styles*/
@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

Upvotes: 1

Rise Ledger
Rise Ledger

Reputation: 969

I think you will need to add browser vendor prefix for chrome in order to work. If you take a look the current chrome for animation to support need to have -webkit in front of keyframes. Take a look here: http://caniuse.com/#feat=css-animation

At the end you will have something like this:

@-webkit-keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

And then will use it like this:

.inner.two {
  right: 0%;
  top: 0%;
  -webkit-animation: rotate-two 1s linear infinite;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

You will need to make this for all others animation also. I just give example for one of them

Upvotes: 1

Related Questions