css - 为什么这个 CSS3 旋转动画设置在 Chrome 和 Safari 上不起作用？

Question

( JSFIDDLE 提供..)

目标:

• 不断旋转一个元素3秒然后停止
• 旋转停止后，将元素旋转 175 度。从其当前 Angular 开始旋转(无论恒定旋转停止时的 Angular 是什么)

问题#1

在 Chrome 上，停止持续旋转后，元素会旋转 175 度，但没有任何动画。我正在尝试重置动画(我暂停了动画以停止持续旋转)，但似乎没有任何效果。

问题 #2

在 Safari 上，在停止持续旋转后，元素的 Angular 重置为 0 度(通过自身)，然后通过动画旋转到 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)'
 });