1

次の CSS3 プロパティがあります。

@keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } }
@-webkit-keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } }


#dropdown-menu li a span.notify {
    position:absolute;
    bottom:-2em;
    right: 0.5em;

    width: 1.5em;
    height: 1.5em;

    line-height:1.5em;
    text-align:center;

    font-family:"Helvetica Neue";
    font-weight:bold;
    color:#fff;
    text-shadow:0px 1px 0px rgba(0,0,0,.15);

    -webkit-box-shadow:
        inset 0px 1px 0px rgba(255,255,255,35),
        0px 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow:
        inset 0px 1px 0px rgba(255,255,255,.35),
        0px 1px 1px rgba(0,0,0,.2);
    box-shadow:
        inset 0px 1px 0px rgba(255,255,255,.35),
        0px 1px 1px rgba(0,0,0,.2);

    -webkit-border-radius:4em;
    -moz-border-radius:4em;
    border-radius:4em;

    opacity:0;
    filter: alpha(opacity=0);

    animation: fadeSlideIn ease-in 1;
    -webkit-animation: fadeSlideIn ease-in 1;
    animation-fill-mode: forwards;

    animation-duration: 1s;
    animation-delay: 0.5s

}

#dropdown-menu li a span.notify.pink {
    background-image: -webkit-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -moz-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -o-linear-gradient(top,   rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -ms-linear-gradient(top,  rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: linear-gradient(top,      rgb(231, 56, 56), rgb(204, 24, 56));

    border:1px solid #a3112b;
}
#dropdown-menu li a span.yellow {
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

    border:1px solid #dea94f;
}
#dropdown-menu li a span.blue {
    background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

    border:1px solid #79b5cb;
}

これは IE/Firefox では正常に機能しますが、Chrome では機能しません。私は何を間違っていますか?

4

2 に答える 2