Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why isn't CSS keyframes working on my mobile device?

I have created keyframes in CSS - it works on my laptop as expected. However, on my iphone 6, it doesn't. It just stays static. What am I missing? 

        <div class="time-of-day rotating">
            <h2></h2>
        </div>

@-webkit-keyframes rotating/* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  to {
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(360deg); } }
@keyframes rotating {
  from {
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  to {
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); } }
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite; }
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

What version is your iphone 6, and what version is your ios safari?

Kristian Woods
Kristian Woods
23,414 Points

iphone 6: IOS 11.4

chrome: 67.0.3396.87

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Odd, it should be working for you then. Assuming that you are adding content to the div, it appears to work for me.

Kristian Woods
Kristian Woods
23,414 Points 
if(h >= 12) {
   document.querySelector(".time-of-day h2").innerHTML = `${h} : ${m}pm`; 
} else {
    document.querySelector(".time-of-day h2").innerHTML = `${h} : ${m}am`;
}

I'm using JS to create the content. is that an issue?

Kristian Woods
Kristian Woods
23,414 Points

Oh wait! I cleared the cache, stopped the browser, opened it back up - now its working :)