css动画方向问题？

Question

想改成从左上角往右侧掉落 。。

.leave {

position:fixed;
z-index:1000;
width: 25px;
height: 20px;
-webkit-animation-iteration-count: infinite,infinite;
-webkit-animation-direction: normal,normal;
-webkit-animation-timing-function: linear,ease-in;
-moz-animation-iteration-count: infinite,infinite;
-moz-animation-direction: normal,normal;
-moz-animation-timing-function: linear,ease-in;
-o-animation-iteration-count: infinite,infinite;
-o-animation-direction: normal,normal;
-o-animation-timing-function: linear,ease-in;
animation-iteration-count: infinite,infinite;
animation-direction: normal,normal;
animation-timing-function: linear,ease-in;

}
.leave>img {

position: fixed;
top:50px;
left: 10px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-transform-origin: 50% -800%;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-timing-function: ease-in-out;
-o-transform-origin: 50% -100%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
transform-origin: 50% -100%;

}
@-webkit-keyframes fade {

0% {opacity: 1}
95% {opacity: 1}
100% {opacity: 0}

}
@-webkit-keyframes drop {

0% {
    -webkit-transform: translate(80px,-50px)
}
100% {
    -webkit-transform: translate(-800px,700px)
}

}
@-webkit-keyframes clockwiseSpin {

0% {
    -webkit-transform: rotate(-50deg)
}
100% {
    -webkit-transform: rotate(50deg)
}

}
@-webkit-keyframes counterclockwiseSpinAndFlip {

0% {
    -webkit-transform: scale(-1,1) rotate(50deg)
}
100% {
    -webkit-transform: scale(-1,1) rotate(-50deg)
}

}
@-moz-keyframes fade {

0% {
    opacity: 1
}
95% {
    opacity: 1
}
100% {
    opacity: 0
}

}
@-moz-keyframes drop {

0% {
    -moz-transform: translate(80px,-50px)
}
100% {
    -moz-transform: translate(-800px,700px)
}

}
@-moz-keyframes clockwiseSpin {

0% {
    -moz-transform: rotate(-50deg)
}
100% {
    -moz-transform: rotate(50deg)
}

}
@-moz-keyframes counterclockwiseSpinAndFlip {

0% {
    -moz-transform: scale(-1,1) rotate(50deg)
}
100% {
    -moz-transform: scale(-1,1) rotate(-50deg)
}

}
@-o-keyframes fade {

0% {
    opacity: 1
}
95% {
    opacity: 1
}
100% {
    opacity: 0
}

}
@-o-keyframes drop {

0% {
    -o-transform: translate(80px,-50px)
}
100% {
    -o-transform: translate(-800px,700px)
}

}
@-o-keyframes clockwiseSpin {

0% {
    -o-transform: rotate(-50deg)
}
100% {
    -o-transform: rotate(50deg)
}

}
@-o-keyframes counterclockwiseSpinAndFlip {

0% {
    -o-transform: scale(-1,1) rotate(50deg)
}
100% {
    -o-transform: scale(-1,1) rotate(-50deg)
}

}
@keyframes fade {

0% {
    opacity: 1
}
95% {
    opacity: 1
}
100% {
    opacity: 0
}

}
@keyframes drop {

0% {
    transform: translate(80px,-50px)
}
100% {
    transform: translate(-800px,700px)
}

}
@keyframes clockwiseSpin {

0% {
    transform: rotate(-50deg)
}
100% {
    transform: rotate(50deg)
}

}
@keyframes counterclockwiseSpinAndFlip {

0% {
    transform: scale(-1,1) rotate(50deg)
}
100% {
    transform: scale(-1,1) rotate(-50deg)
}

}

js:
~(function(doc) {

    var FallingLeaves = function(num, id) {
        this.body = doc.body;
        this.support = false;
        this.container = id ? doc.getElementById('id') : this.body;
        this.num = num ? num : 8;
        this.init()
    };
    FallingLeaves.prototype = {
        init: function() {
            this.supportNot();
            if (this.support != false) {
                for (var i = 0; i < this.num; i++) {
                    this.container.appendChild(this.createLeaf())
                }
            }
        },
        supportNot: function() {
            var domPrefixes = 'Webkit Moz O ms a'.split(' ');
            for (var i = 0; i < domPrefixes.length; i++) {
                if (this.container.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
                    this.support = domPrefixes[i];
                    break
                }
                if (domPrefixes[i] == "a") {
                    if (this.container.style.animationName !== undefined) {
                        this.support = domPrefixes[i];
                        break
                    }
                }
            }
        },
        randomInteger: function(low, high) {
            return low + Math.floor(Math.random() * (high - low))
        },
        randomFloat: function(low, high) {
            return low + Math.random() * (high - low)
        },
        pixelValue: function(value) {
            return value + 'px'
        },
        durationValue: function(value) {
            return value + 's'
        },
        createLeaf: function() {
            var self = this,
                leafDiv = doc.createElement('div'),
                image = doc.createElement('img'),
                spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip',
                fadeAndDropDuration = self.durationValue(self.randomFloat(5, 11)),
                spinDuration = self.durationValue(self.randomFloat(4, 8)),
                leafDelay = self.durationValue(self.randomFloat(0, 5));
            leafDiv.className = "leave";
            image.src = "images/" + self.randomInteger(1, self.num) + '.png';
            leafDiv.style.top = self.pixelValue(30);
            leafDiv.style.right= self.pixelValue(self.randomInteger(0, 50));
            if (self.container.style[self.support + 'AnimationName'] !== undefined) {
                image.style[self.support + 'AnimationName'] = spinAnimationName;
                image.style[self.support + 'AnimationDuration'] = spinDuration;
                leafDiv.style[self.support + 'AnimationName'] = 'fade, drop';
                leafDiv.style[self.support + 'AnimationDelay'] = leafDelay + ', ' + leafDelay;
                leafDiv.style[self.support + 'AnimationDuration'] = fadeAndDropDuration + ', ' + fadeAndDropDuration
            }
            if (this.support == "a") {
                image.style.animationName = spinAnimationName;
                image.style.animationDuration = spinDuration;
                leafDiv.style.animationName = 'fade, drop';
                leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;
                leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration
            }
            leafDiv.appendChild(image);
            return leafDiv
        }
    };
    new FallingLeaves();
})(document);

Answer 1

.leave{
    left: 0;
    top: 0;
}

@keyframes drop {
    0% {
        transform: translate(0,0)
    }
    100% {
        transform: translate(800px,700px)
    }
}

其它兼容写法自己修改下