Witam,

próbuję stworzyć banalną animację za pomocą CSS i tak też się dzieje - chrome i safari reagują tak jak chcę, firefoxa jednak nie potrafię przekonać... kombinuję na wszelkie sposoby z -moz- ale niewielki efekt to przynosi

[HTML] pobierz, plaintext 
.grayscale99{
    background: #dad8d8 !important;
    color: #cccccc !important;
    //animation: zmien_kolor 5.4s step-end both;
 
    animation-name: zmien_kolor, zmien_bakground;
    -moz-animation-name: zmien_kolor, zmien_bakground;
 
    animation-duration: 4s;
    -moz-animation-duration: 4s;
 
    animation-delay: 5.4s;
    -moz-animation-delay: 5.4s;
 
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.grayscale99 h4{
    color: #cccccc !important;
 
    animation-name: zmien_kolor; 
    -moz-animation-name: zmien_kolor; 
 
    animation-duration: 4s ;
    -moz-animation-duration: 4s ;
 
    animation-delay: 5.4s;
    -moz-animation-delay: 5.4s;
 
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.grayscale100{
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    opacity: .5;
    animation-name: opacity_gray;
    animation-duration: 4s ;
    animation-delay: 5.4s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.grayscale101{
        border: 1px solid rgba(255, 255, 255,0.1) !important;
    animation-name: zmien_border;
    -moz-animation-name: zmien_border;
 
    animation-duration: 4s ;
    -moz-animation-duration: 4s ;
 
    animation-delay: 5.4s;
    -moz-animation-delay: 5.4s;
 
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.grayscale101 a{
        color: rgba(255, 255, 255,0.1) !important;
    animation-name: zmien_kolor2;
    -moz-animation-name: zmien_kolor2;
 
    animation-duration: 4s ;
    -moz-animation-duration: 4s ;
 
    animation-delay: 5.4s;
    -moz-animation-delay: 5.4s;
 
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
 
.grayscale102 a{
        color: rgba(255, 255, 255,0.1) !important;
    animation-name: zmien_kolor2;
    animation-duration: 4s ;
    animation-delay: 5.4s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
 
@keyframes zmien_kolor {
    from { color: #cccccc }
    to   { color: #3D3D3D }
    //to   { color: red }
}
@-moz-keyframes zmien_kolor {
    from { color: #cccccc }
    to   { color: #3D3D3D }
    //to   { color: red }
}
 
@keyframes zmien_bakground {
    from { background: #dad8d8 }
    to   { background: #f1f0f0; }
    //to   { color: red }
}
@-moz-keyframes zmien_bakground {
    from { background: #dad8d8 }
    to   { background: #f1f0f0; }
    //to   { color: red }
}
 
@keyframes opacity_gray{
    from{ -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    opacity: .5;}
 
    to{
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    opacity: 1;
    }
}
@-moz-keyframes opacity_gray{
    from{ -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    opacity: .5;}
 
    to{
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    opacity: 1;
    }
}
 
@keyframes zmien_border{
    from{border: 1px solid rgba(255, 255, 255,0.1)}
    to{border: 1px solid rgba(255, 255, 255,1)}
}
@-moz-keyframes zmien_border{
    from{border: 1px solid rgba(255, 255, 255,0.1)}
    to{border: 1px solid rgba(255, 255, 255,1)}
}
 
@keyframes zmien_kolor2{
    from{color: rgba(255, 255, 255,0.1)}
    to{color: rgba(255, 255, 255,1)}
}
@-moz-keyframes zmien_kolor2{
    from{color: rgba(255, 255, 255,0.1)}
    to{color: rgba(255, 255, 255,1)}
}
[HTML] pobierz, plaintext 

Co robię źle??

Skoro nadałeś color i background jako !important, to raczej animacja nie zadziała.
Przy okazji pozbądź się właściwości i klatek z przedrostkiem -moz. Chyba, że robisz to na jakąś starą wersję FF.