mirrors/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity.git synced 2025-01-23 09:51:57 -05:00
Code Issues Projects Releases Packages 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
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>