LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-11 05:25:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Base: Extend the web-animations demo to showcase complex transforms

Browse Source
This commit is contained in:
Matthew Olsson 2024-02-28 18:53:10 -07:00 committed by Andreas Kling
parent 6d0672eec0
commit 53a247dbe1
Notes: sideshowbarker 2024-07-17 20:58:35 +09:00 
Author: https://github.com/mattco98
Commit: https://github.com/SerenityOS/serenity/commit/53a247dbe1
Pull-request: https://github.com/SerenityOS/serenity/pull/23400
Reviewed-by: https://github.com/ADKaster
Reviewed-by: https://github.com/alimpfard
Reviewed-by: https://github.com/kalenikaliaksandr
Reviewed-by: https://github.com/nico
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Base/res/html/misc/web-animations.html
View File

@ -35,6 +35,12 @@
background-color: blue;
border-radius: 10px;
}
#box4 {
height: 50px;
top: 600px;
left: 50px;
}
</style>
</head>
<body>
@ -51,6 +57,7 @@
<div id="box3">
<div id="box3-inner"></div>
</div>
<div class="box" id="box4"></div>
<script>
for (let i = 0; i < 5; i++) {
const ball = document.getElementById(`ball${i}`);
@ -78,10 +85,19 @@
});
// Discrete property animation
box3.animate({ overflow: ['visible'] }, {
box3.animate({ overflow: ["visible"] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate",
})
});
box4.animate([
{ transform: "none" },
{ transform: "translateX(400px) rotate3d(1, 1, 0, 50deg)" },
], {
duration: 2000,
iterations: Infinity,
direction: "alternate"
});
</script>
</body>