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/

你错过了@ -webkit-keyframe＆amp; @ -moz-keyframe以及@keyframe。现在写这些都很糟糕，所以我建议使用某种CSS预处理器来处理这个问题，以便通过详细的CSS节省自己的输入时间和调试时间。

例如，使用Stylus＆amp; 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会为您输出所有带前缀的版本！

Answer 2

http://jsfiddle.net/c6kBj/36/

您还需要为动画添加前缀：

...
@keyframes buzz {...}
@-ms-keyframes buzz {...}
@-webkit-keyframes buzz {...}
...

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

纯CSS动画拒绝......动画

2 个答案: