CODEWITHSUNDEEP
cssanimationwebkit
user1140942
user1140942

Reputation: 31

CSS3 keyframes breaks in safari

I have this code for a loading spinner, it works in all browsers, except safari, where it breaks the entire site, I've narrowed it down to the issue being the webkit specific code below but can't figure out why it brakes, any ideas:

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

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

Upvotes: 0

Views: 236

Answers (1)

Max
Max

Reputation: 1525

You have unnecessary semicolons after the 100% definition in your code. Apparently Safari chokes on it while the others ignore it. 

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

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

Upvotes: 2

Related Questions