Question

（ JSFIDDLE 提供..）

目标：

持续旋转元素3秒钟然后停止
旋转停止后，将元素旋转至175度。从当前角度开始为旋转设置动画（无论旋转停止时的角度如何）

问题＃1

在 Chrome 上，停止常量旋转后，元素将旋转至175度，但无任何动画。我试图重置动画（我暂停以停止不断旋转），但似乎没有任何效果。

问题＃2

在 Safari 上，在停止常量旋转后，元素的角度将重置为0度（单独），然后它会＆＃39;用动画旋转到175度。

因此，在这两种情况下，事件序列都无法按预期工作。你能看出我做错了吗？

您是否拥有包含IE10 +的跨浏览器检查解决方案？

请检查 JSFIDDLE 以查看以下代码

CSS：

span {
   position:absolute;
   top: 10px;
   left: 10px; 
}

div {
    position:absolute;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: black;
    border-top: 10px solid blue;
    border-bottom: 10px solid red;
    border-left: 10px solid green;
    border-right: 10px solid yellow;
}

@-webkit-keyframes constantrotate {  
    from {    
        -webkit-transform: rotate(0deg);  
    }  
    to {    
        -webkit-transform: rotate(360deg);  
    }
}

HTML：

<span></span>
<div></div>

JAVASCRIPT：

/* This function returns the element's current degrees at any given time */
var currentDegreesFor = function($element) {
    var matrix = $element.css("-webkit-transform") ||
        $element.css("-moz-transform") ||
        $element.css("-ms-transform") ||
        $element.css("-o-transform") ||
        $element.css("transform");

    if (matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    } else {
        var angle = 0;
    }

    return (angle < 0) ? angle += 360 : angle;
};

var $element = $('div');

// INITIALIZING CONSTANT ROTATION
$('span').text('rotating constantly');
$element.css({
    "-webkit-animation": "constantrotate infinite 5s linear",
    "animation": "constantrotate infinite 5s linear"
});

// AFTER 3 SECONDS
setTimeout(function() {
    // STOP CONTSTANT ROTATION
    $element.css({
        'animation-play-state': 'paused',
        '-webkit-animation-play-state': 'paused'
    });

    // get element's current degrees
    var degrees = currentDegreesFor($element);

    $('span').text('constant rotation stopped at ' + degrees +
        ' degrees');

    // AFTER 3 SECONDS
    setTimeout(function() {
        /* This animation has now stopped at X degrees
        However the element's current rotation isn't 
        set to X degrees explicitly with a CSS rule.
        Apparently, I need to add that rule myself if I want to 
        further rotate the element */
        $element.css({
            'transform': 'rotate(' + degrees + 'deg)',
            '-webkit-transform': 'rotate(' + degrees + 'deg)'
        });

        $('span').text('CSS tranform: rotate() set to ' + degrees +
            ' degrees');

        // AFTER 3 SECONDS
        setTimeout(function() {
            $('span').text('rotating to 175 degrees with animation');

            /* I'm now resetting the animation from 
            "constantrotate" to "transition". The element is
            rotated but with no animation (at least none on Chrome - on Safari the element's angle 
            is set back to 0 before this animation begins). What am I doing wrong ?
            */
            $element.css({
                '-webkit-animation': '-webkit-transition',
                'animation': 'transition',
                'transition': 'transform 10s ease-in',
                '-webkit-transition': '-webkit-transform 10s ease-in',
                'transform': 'rotate(175deg)',
                '-webkit-transform': 'rotate(175deg)'
            });
        }, 3000);
    }, 3000);
}, 4000);

Answer 1

更好的方法：

混合关键帧动画和过渡是不可靠的，并且在浏览器中表现不同...... 所以我建议使用

requestAnimationFrame

看到它在这里工作：http://jsfiddle.net/mc3v6xsw/5/

并查看此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

这适用于chrome，safari，firefox和ie10

function constantRotation(timestamp){
    if(startTime==null)
        startTime=timestamp;
    var delta = timestamp-startTime;
    degrees = (360/fullRotationTime)*delta;
    $element.css({
             'transform': 'rotate(' + degrees + 'deg)',
             '-webkit-transform': 'rotate(' + degrees + 'deg)'        
    });
    rotationAnimation=window.requestAnimationFrame(constantRotation);
}
var rotationAnimation=window.requestAnimationFrame(constantRotation);

你可以用

来阻止它

cancelAnimationFrame(rotationAnimation);

第一次尝试：

这适用于chrome：http://jsfiddle.net/p08L6ndo/

我做了什么：暂停后：

 $element.css({
     'transform': 'rotate(' + degrees + 'deg)',
     '-webkit-transform': 'rotate(' + degrees + 'deg)',
     'animation':'none',
     'transition':'transform 2s'
 });

又过了3秒钟：

 $element.css({
     '-webkit-transform': 'rotate(175deg)',
     'transform':'rotate(175deg)'
 });

为什么这个CSS3旋转动画设置无法在Chrome＆amp;苹果浏览器？

1 个答案:

更好的方法：

第一次尝试：