mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
Base: Extend the web-animations demo to showcase complex transforms
This commit is contained in:
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
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user