Attachment 368481 Details for Bug 197381 – Reduction

Reduction

clip-path-animation.html (text/html), 987 bytes, created by Simon Fraser (smfr) on 2019-04-29 13:20:43 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-04-29 13:20:43 PDT

Size: 987 bytes

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>
>    <style type="text/css">
>        @keyframes circle {
>            0% {
>                -webkit-clip-path: circle(0 at center)
>            }
>            to {
>                -webkit-clip-path: circle(74% at center)
>            }
>        }
>
>        .box {
>            margin: 20px;
>            width: 300px;
>            height: 300px;
>            background-color: blue;
>        }
>        
>        .composited {
>            transform: translateZ(0);
>        }
>        
>        .box.changed {
>            animation: circle 3s;
>        }
>        
>        
>    </style>
>
>    <script>
>        
>        window.addEventListener('load', () => {
>            setTimeout(() => {
>                document.getElementById('target').classList.add('changed');
>            }, 1000);
>        }, false);
>    </script>
></head>
><body>
>    <p>You should see a square then a growing circle</p>
>    <div id="target" class="composited box">
>        Box
>    </div>
></body>
></html>

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        @keyframes circle {
            0% {
                -webkit-clip-path: circle(0 at center)
            }
            to {
                -webkit-clip-path: circle(74% at center)
            }
        }

        .box {
            margin: 20px;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
        .composited {
            transform: translateZ(0);
        }
        
        .box.changed {
            animation: circle 3s;
        }
        
        
    </style>

    <script>
        
        window.addEventListener('load', () => {
            setTimeout(() => {
                document.getElementById('target').classList.add('changed');
            }, 1000);
        }, false);
    </script>
</head>
<body>
    <p>You should see a square then a growing circle</p>
    <div id="target" class="composited box">
        Box
    </div>
</body>
</html>

Actions: View

Attachments on bug 197381: 368481 | 368487