Question

有人能告诉我如何让这个动画在IE和Opera中运行吗？它在Chrome，Firefox和Safari中非常完美。

.quote:nth-child(1) {
  -webkit-animation: cycle 15s 0s infinite linear;
  -moz-animation: cycle 15s 0s infinite linear;
  -ms-animation: cycle 15s 0s infinite linear;
  -o-animation: cycle 15s 0s infinite linear;
  animation: cycle 15s 0s infinite linear;
}

http://jsfiddle.net/MYr2R/

Answer 1

你有一些CSS语法错误。我纠正了它们并尝试了它，它对我来说很好。

BTW，我建议您考虑将Web Essentials添加到Visual Studio中（假设您使用的是VS）。它是一个出色的Web开发插件，http://vswebessentials.com/。此外，请记住IE内置了一套很好的开发人员工具。我在最新版本http://www.youtube.com/user/ChrisLove62上做了几个快速视频。

        .container {
        width: 280px;
        margin: 0 auto;
    }

    .logo {
        text-align: center;
    }

    body {
        font: 75%/1.5em Arial, sans-serif;
    }

    .quote {
        position: absolute;
        overflow: hidden;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        border: 1px solid #030303;
        background: url(img/pattern.png) repeat;
        padding-bottom: .5em;
        height: auto;
        width: 200px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

        .quote .text {
            padding: 15px 15px 25px 15px;
            color: #000;
            font-style: italic;
            font-weight: 100;
            zoom: 1;
            font-size: 1.25em;
        }

        .quote .author {
            display: block;
            padding: .5em;
            margin-top: 1em;
            border-top: 1px dotted #4d4d4d;
            color: #7a9f17;
            font-style: normal;
            font-size: 1em;
            font-size: 1.25em;
            margin-right: 15px;
        }


        /*cross browser animations*/
        .quote:nth-child(1) {
            -webkit-animation: cycle 15s 0s infinite linear;
            -moz-animation: cycle 15s 0s infinite linear;
            -o-animation: cycle 15s 0s infinite linear;
            animation: cycle 15s 0s infinite linear;
        }

            .quote:nth-child(1):hover {
                -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }

        .quote:nth-child(2) {
            -webkit-animation: cycle 15s 5s infinite linear;
            -moz-animation: cycle 15s 5s infinite linear;
            -o-animation: cycle 15s 5s infinite linear;
            animation: cycle 15s 5s infinite linear;
        }

        .quote:nth-child(3) {
            -webkit-animation: cycle 15s 10s infinite linear;
            -moz-animation: cycle 15s 10s infinite linear;
            -o-animation: cycle 15s 10s infinite linear;
            animation: cycle 15s 10s infinite linear;
        }

    /*croass browser keyframe anitmation*/
    @keyframes cycle {
        0%
    {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    2% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    31% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    33% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    100% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    }

    @-moz-keyframes cycle {
        0% {
            filter: alpha(opacity=0);
            opacity: 0;
        }

        2% {
            filter: alpha(opacity=100);
            opacity: 1;
        }

        31% {
            filter: alpha(opacity=100);
            opacity: 1;
        }

        33% {
            filter: alpha(opacity=0);
            opacity: 0;
        }

        100% {
            filter: alpha(opacity=0);
            opacity: 0;
        }
    }

    @-webkit-keyframes cycle {
        0%
    {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    2% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    31% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    33% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    100% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    }

    @-ms-keyframes cycle {
        0%
    {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    2% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    31% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    33% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    100% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    }

    @-o-keyframes cycle {
        0%
    {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    2% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    31% {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    33% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    100% {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    }

Opera和IE中的动画

1 个答案: