1 reply [Last post]
SandraC
SandraC's picture
Offline
newbie
Canada
Last seen: 3 years 14 weeks ago
Canada
Timezone: GMT-4
Joined: 2016-07-01
Posts: 1
Points: 4

Hello -

I have a CSS animation on my dev site home page that is not running correctly in Safari.

The fourth element on the page is running backwards first, then forwards. I have tried a few things, such as setting the first 50% of the animation to have opacity of zero and font size to 0 as well, but that did not help.

The animation works perfectly in Chrome.

Any suggestions welcome!

With thanks,
Sandra

--------------

URL: http://ce3.b0e.myftpupload.com

/* helping great ideas grow > color-change animation */
.headline4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #f206f9;  
  line-height: 1;
   letter-spacing: 1.5rem;
  margin-right: -1.5rem;
  font-size: 60px;
  font-size: 6.0rem;
  text-align: center;
   margin-bottom: 20px;
  -webkit-animation: color-change 8s linear 1 normal;
  -moz-animation: color-change 8s linear 1 normal;
  -ms-animation: color-change 8s linear 1 normal;
  -o-animation: color-change 8s linear 1 normal;
  animation: color-change 8s linear 1 normal;
}
 
/* color-change */
 
@-webkit-keyframes color-change {
0% {opacity: 0; font-size: 0rem;}
50% {opacity: 0; font-size: 0rem;}
100% {opacity: 1; font-size: 6rem;}
    from {color: #460048} to {color: #f206f9}
}
@-moz-keyframes color-change {
0% {opacity: 0; font-size: 0rem;}
50% {opacity: 0; font-size: 0rem;}
100% {opacity: 1; font-size: 6rem;}
    from {color: #460048} to {color: #dc04ff}
}
@-ms-keyframes color-change {
0% {opacity: 0; font-size: 0rem;}
50% {opacity: 0; font-size: 0rem;}
100% {opacity: 1; font-size: 6rem;}
    from {color: #460048} to {color: #dc04ff}
}
@-o-keyframes color-change {
0% {opacity: 0; font-size: 0rem;}
50% {opacity: 0; font-size: 0rem;}
100% {opacity: 1; font-size: 6rem;}
    from {color: #460048} to {color: #dc04ff}
}
@keyframes color-change {
0% {opacity: 0; font-size: 0rem;}
50% {opacity: 0; font-size: 0rem;}
100% {opacity: 1; font-size: 6rem;}
    from {color: #460048} to {color: #dc04ff}
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 10 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Hi, Sandra

Unfortunately, @keyframes is not yet beyond draft status, so cannot be depended on. From discussions with other developers, the consensus is that since Chrome forked away from Safari, Apple is allowing Safari to stagnate; becoming the new IE6.

Since I've retired, I haven't fully kept up with the new bells and whistles, nor am I as concerned with browser failings. (I no longer even have IE or Safari on any of my machines.) I do try (in a lackadaisical manner), though. I do recall reading that under some circumstances that where there are duplications, a keyframe may begin at some offset from 0%. That may be what you're seeing and may be worth researching. Or, it may simply be a browser bug.

Were it me, and while I was trying to debug Safari, I'd remove all the @keyframes -webkit- and -webkit- animation properties. Chrome has basic support and doesn't need the proprietary prefix; neither do IE10, Firefox4 nor the current Opera. That should do two things; it will allow for graceful degradation to the final rendering and it will remove several opportunities for error where a browser lacks basic support.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.