CODEWITHSUNDEEP
javascriptjquerycssgoogle-chrome
throwawayacc
throwawayacc

Reputation: 11

CSS3 animations working in every browser except Chrome

Everything works perfectly in all browsers except Chrome. The fade in effects seems to work fine but the floatInCommand animation stutters and makes the Commend (a bootstrap container) lock in place after 1 second. I don't know if I need to add anything else besides "-webkit". I have looked at threads with similar problems and they all fix it by adding "-webkit". 

.slide-in {
    -webkit-animation-name: floatInCommend;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1.25s;
}
@-webkit-keyframes floatInCommend {
    from {
        opacity: 0;
        top: -100%;
    }
    to {
        opacity: 1;
        top: 75;
    }
}

.slide-in-footer {
    -webkit-animation-name: floatInFooter;
    -webkit-animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0.5s;
}
@-webkit-keyframes floatInFooter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slide-in-nav {
    -webkit-animation-name: floatInFooter;
    -webkit-animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0.5s;
}
@-webkit-keyframes floatInNav {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Upvotes: 1

Views: 55

Answers (1)

Dan Chill
Dan Chill

Reputation: 466

You need both the -webkit, -moz, and non vendor prefix attributes. Consider using a task runner and an autoprefixer to make sure you have all css vendor prefixes in place before publishing your code.

Upvotes: 1

Related Questions