Wie verwende ich CSS3 animieren, sich zu bewegen Hintergrundbild in einem div oben und unten?

<div class="abc">
</div>


.abc{
    background: url("blah.jpg") no-repeat;
    width:200px;
    height:200px;
}

Mein hintergrund Bild ist 200 x 600. Wie kann ich es verschieben nach oben und unten die div - (ich möchte das div zu bleiben, 200x200, aber die mehr Bild geht rauf und runter.)

Ich will nicht, Javascript zu verwenden, um dies zu tun. (Da tun es auf diese Weise nicht verwenden die hardware und die wird langsam sein.)

InformationsquelleAutor TIMEX | 2010-12-03
  1. 5
    @keyframes bounce-background {
    from {
        background-position: top;
    }
    50% {
        background-position: bottom;
    }
    to {
        background-position: top;
    }
}
.abc {
    animation-name: bounce-background;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-iteration-count: infinite;

    /* For Chrome & Safari */
   -webkit-animation-name: bounce-background;
   -webkit-animation-timing-function:ease-in-out;
   -webkit-animation-duration:2s;
   -webkit-animation-iteration-count:infinite;
}

    Wiederholen Sie diese nicht finalisierte CSS3-Eigenschaften unter Hersteller Präfixe für die Browser, die Sie unterstützen (z.B. @-moz-keyframes @-o-keyframes @-webkit-keyframes etc.).

    InformationsquelleAutor ephemient
Schreibe einen Kommentar