html - 纯 CSS 动画拒绝...动画

Question

我正在制作一个纯 CSS 动画(第一次制作)，但我似乎无法让绘图移动。 http://jsfiddle.net/c6kBj/30/

我不太确定问题出在哪里，但它非常令人沮丧。

如果您不想使用 jsfiddle，这里是代码:

<div class="bg">
    <div class="beeBody">
        <div id="rear" class="beePart beeStripe"></div>
        <div id="front" class="beePart beeStripe"></div>
        <div class="beePart beeStinger"></div>
        <div class="beePart beeHead"></div>
        <div class="beePart beeEye"></div>
        <div class="beePart beePupil"></div>
        <div class="beePart beeSmile"></div>
        <div class="beePart beeAntenna"></div>
        <div class="beePart beeWing" id="front-right"></div>
        <div class="beePart beeWing" id="front-left"></div>
    </div>
</div>

.bg{
    height: 500px;
    width: 1200px;
    background-color: green;
}

.beeBody {
    top: 100px;
    left: 100px;
    height: 0;
    width: 0;
    background-color: black;
    border-left: 5px solid yellow;
    border-right: 5px solid yellow;
    padding: 10px 20px 10px;
    border-radius: 20px;
    position: absolute;
    -moz-animation: buzz 3s infinite;
    -webkit-animation: buzz 3s infinite;
    animation: buzz 3s infinite;
}

.beePart {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    position: relative;
}

.beeStripe {
    background-color: yellow;
    padding-top: 9px;
    border-top: solid yellow 1px;
    padding-bottom: 9px;
    border-bottom: solid yellow 1px;
    border-left: solid yellow 3px;
    border-right: solid yellow 3px;
}

    .beeStripe#rear {
        left: 5px;
        top: -10px;
    }

    .beeStripe#front {
        left: -10px;
        top: -30px;
    }

.beeStinger {
    border-top: solid transparent 2px;
    border-bottom: solid transparent 2px;
    border-left: none;
    border-right: solid black 12.5px;
    left: -37px;
    top: -42px;
}

.beeHead {
    border: 12px solid black;
    border-radius: 12px;
    top: -57px;
    left: 20px;
}

.beeEye {
    border-top: solid white 6px;
    border-bottom: solid white 6px;
    border-left: solid white 3px;
    border-right: solid white 3px;
    border-radius: 16px;
    top: -81px;
    left: 36px;
}

.beePupil {
    z-index: 20;
    border-top: solid black 3px;
    border-bottom: solid black 3px;
    border-left: solid black 1.5px;
    border-right: solid black 1.5px;
    border-radius: 8px;
    top: -90px;
    left: 39px;
}

.beeSmile {
    border-bottom: solid yellow 1px;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom-left-radius: 10px;
    top: -85px;
    left: 31.5px;
}

.beeAntenna {
    border-left: solid black 1.5px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-top-left-radius: 16px;
    top: -114px;
    left: 35px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}

.beeWing {
    width: 20px;
    height: 40px;
    background: white;
    -moz-border-radius: 20px / 40px;
    -webkit-border-radius: 20px / 40px;
    border-radius: 20px / 40px;
    top: -140px;
    left: -5px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    opacity: .8;
}

    .beeWing#front-left {
        -webkit-transform: rotate(-50deg);
        -moz-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);
        transform: rotate(-50deg);
        top: -175px;
        left: -10px;
    }

@keyframes buzz {
    0% {
        -moz-transform: translateY(-5px) translateX(0) rotate(30deg);
        -ms-transform: translateY(-5px) translateX(0) rotate(30deg);
        -webkit-transform: translateY(-5px) translateX(0) rotate(30deg);
        transform: translateY(-5px) translateX(0) rotate(30deg);
    }

    25% {
        -moz-transform: translateY(5px) translateX(25%) rotate(20deg);
        -ms-transform: translateY(5px) translateX(25%) rotate(20deg);
        -webkit-transform: translateY(5px) translateX(25%) rotate(20deg);
        transform: translateY(5px) translateX(25%) rotate(20deg);
    }

    50% {
        -moz-transform: translateY(10px) translateX(50%);
        -ms-transform: translateY(10px) translateX(50%);
        -webkit-transform: translateY(10px) translateX(50%);
        transform: translateY(10px) translateX(50%);
    }

    75% {
        -moz-transform: translateY(5px) translateX(75%) rotate(-20deg);
        -ms-transform: translateY(5px) translateX(75%) rotate(-20deg);
        -webkit-transform: translateY(5px) translateX(75%) rotate(-20deg);
        transform: translateY(5px) translateX(75%) rotate(-20deg);
    }

    100% {
        -moz-transform: translateY(-17px) translateX(100%) rotate(-40deg);
        -ms-transform: translateY(-17px) translateX(100%) rotate(-40deg);
        -webkit-transform: translateY(-17px) translateX(100%) rotate(-40deg);
        transform: translateY(-17px) translateX(100%) rotate(-40deg);
    }
}

Answer 1

给你:

http://jsfiddle.net/24ZGT/1/

除了@keyframe 之外，您还缺少@-webkit-keyframe 和@-moz-keyframe。现在编写所有这些内容有点糟糕，所以我建议使用某种 CSS 预处理器来处理这些问题，以节省您自己的打字时间和调试时间，通过冗长的 CSS 进行排序。

例如，使用 Stylus & Nib，您可以像这样编写关键帧:

@keyframes buzz
    0%
        transform translateY(-5px) translateX(0) rotate(30deg)

    25%
        transform translateY(5px) translateX(25%) rotate(20deg)

    50%
        transform translateY(10px) translateX(50%)

    75%
        transform translateY(5px) translateX(75%) rotate(-20deg)

   100%
        transform translateY(-17px)

Stylus 会为您输出所有带前缀的版本!