网页动画API浏览器兼容性测试

WAAPI（Web Animation API） Browser Support Test

web, animation

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2680
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function handleOnFinish() {
    performBasicTest(true, 'test-pof');
}

function handleOnCancel() {
    performBasicTest(true, 'test-poc');
}

function handleFinished() {
    performBasicTest(true, 'test-pfp');
}

function handleReady() {
    performBasicTest(true, 'test-prp');
}

var animateTest = document.getElementById('test-animate');
var animateTestAsArray = document.getElementById('test-animate-kfa');
var animateTestAsObject = document.getElementById('test-animate-kfo');

if (animateTest.animate !== undefined) {
    animateTest.classList.add('passed');
    var player = animateTestAsArray.animate([{
        opacity: 1
    }, {
        opacity: .5
    }, {
        opacity: 1
    }, ], {
        iterations: 1,
        duration: 100,
        id: 'ISetTheId'
    });
    var player3 = animateTestAsArray.animate([{
        opacity: 1
    }, {
        opacity: .5
    }, {
        opacity: 1
    }, ], {
        iterations: 1,
        duration: 100
    });
    if (player) {
        performBasicTest(true, 'test-animate-kfa');
        player.onfinish = handleOnFinish;
        if (player.finished && player.finished.then) {
            player.finished.then(handleFinished);
        }
        if (player.ready && player.ready.then) {
            player.ready.then(handleReady);
        }
    }
    if (player3) {
        player3.oncancel = handleOnCancel;
        if (typeof player3.cancel === 'function') {
            player3.cancel();
        }
    }
    try {
        var player2 = animateTestAsObject.animate({
            opacity: [1, .5, 1]
        }, {
            iterations: 1,
            duration: 100
        });
        if (player2 && (typeof player2.play === 'function') && player2.currentTime >= 0 && window.getComputedStyle) {
            player2.pause();
            player2.currentTime = 50;
            console.log((parseFloat(window.getComputedStyle(animateTestAsObject).opacity)));
            performBasicTest((parseFloat(window.getComputedStyle(animateTestAsObject).opacity) === 0.5), 'test-animate-kfo');

player2.play();
            player2.onfinish = handleOnFinish;
        }
    } catch (e) {}

performBasicTest((player.id === 'ISetTheId'), 'test-pid');

performBasicTest((typeof player.play === 'function'), 'test-pcp');
    performBasicTest((typeof player.pause === 'function'), 'test-pcs');
    performBasicTest((typeof player.reverse === 'function'), 'test-pcr');
    performBasicTest((typeof player.cancel === 'function'), 'test-pcc');
    performBasicTest((typeof player.finish === 'function'), 'test-pcf');
    performBasicTest((player.playbackRate !== undefined), 'test-pbr');
    performBasicTest((player.currentTime !== undefined && player.startTime !== undefined), 'test-ctst');
    performBasicTest((player.effect !== undefined), 'test-pe');
}
performBasicTest((typeof animateTest.getAnimations === 'function'), 'test-ega');

performBasicTest((window.Animation !== undefined), 'test-ac');

var timeline = performBasicTest((document.timeline !== undefined), 'test-dt');
if (timeline) {
    performBasicTest((document.timeline.currentTime !== undefined), 'test-dtct');
    performBasicTest((typeof document.timeline.getAnimations === 'function'), 'test-dtga');
}
performBasicTest((typeof document.getAnimations === 'function'), 'test-dga');

try {
    performBasicTest((typeof window.DocumentTimeline === 'function' && (new DocumentTimeline(0))), 'test-dtc');
} catch (e) {}

function performBasicTest(test, id) {
    if (test) {
        document.getElementById(id).classList.add('passed');
    }
    return test;
}

编译

CSS

HTML

<ul>
    <li id="test-animate">Element.animate() support</li>
    <li id="test-animate-kfa" class="sub">First parameter as array of keyframes like: [ {opacity: 1}, {opacity: 0} ]</li>
    <li id="test-animate-kfo" class="sub">First parameter as object with property arrays like: { opacity: [1, 0] }</li>
    <li id="test-pid" class="sub">id</li>
    <li id="test-pcp" class="sub">play()</li>
    <li id="test-pcs" class="sub">pause()</li>
    <li id="test-pcr" class="sub">reverse()</li>
    <li id="test-pcc" class="sub">cancel()</li>
    <li id="test-pcf" class="sub">finish()</li>
    <li id="test-pbr" class="sub">playbackRate</li>
    <li id="test-ctst" class="sub">currentTime/startTime</li>
    <li id="test-pe" class="sub">effect</li>
    <li id="test-poc" class="sub">oncancel handler</li>
    <li id="test-pof" class="sub">onfinish handler</li>
    <li id="test-pfp" class="sub">finished Promise</li>
    <li id="test-prp" class="sub">ready Promise</li>
    <li id="test-ega">Element.getAnimations()</li>
    <li id="test-kec">KeyframeEffect constructor</li>
    <li id="test-kec-duration" class="sub">set duration</li>
    <li id="test-kec-fill" class="sub">set fill</li>
    <li id="test-kec-direction" class="sub">set direction</li>
    <li id="test-kec-iterations" class="sub">set iterations</li>
    <li id="test-kec-delay" class="sub">set delay</li>
    <li id="test-kec-easing" class="sub">set easing</li>
    <li id="test-kec-spacing" class="sub">set spacing</li>
    <li id="test-kec-composite" class="sub">set composite</li>
    <li id="test-kec-iterationComposite" class="sub">set iterationComposite</li>
    <li id="test-ac">Animation constructor</li>
    <li id="test-dt">Document default timeline</li>
    <li id="test-dtct" class="sub">timeline.currentTime</li>
    <li id="test-dtga" class="sub deprecated">timeline.getAnimations() [old spec and polyfill - moved in spec to document.getAnimations()]</li>
    <li id="test-dga">document.getAnimations()</li>
    <li id="test-bvvbbvn">DocumentTimeline constructor</li>
</ul>

<p>Status updates: <a href="https://birtles.github.io/areweanimatedyet/">Firefox</a>, <a href="https://www.chromestatus.com/features#animations">Chrome/Opera</a>, <a href="https://dev.windows.com/en-us/microsoft-edge/platform/status/webanimationsjavascriptapi">Edge</a>,
    Safari</p>

WAAPI（Web Animation API） Browser Support Test

web, animation

编辑器支持Emmet

快捷键

WAAPI（Web Animation API） Browser Support Test

web, animation

很棒的可交互3D景观浏览动画（基于Three.js构建） - 月夜

Three.js+GSAP实现的虫洞粒子动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：