RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 08:08:12 +00:00
Code Issues Activity Actions

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