mirror of
https://github.com/RGBCube/serenity
synced 2025-07-23 08:27:35 +00:00
LibWeb: Add preliminary support for CSS animations
This partially implements CSS-Animations-1 (though there are references to CSS-Animations-2). Current limitations: - Multi-selector keyframes are not supported. - Most animation properties are ignored. - Timing functions are not applied. - Non-absolute values are not interpolated unless the target is also of the same non-absolute type (e.g. 10% -> 25%, but not 10% -> 20px). - The JavaScript interface is left as an exercise for the next poor soul looking at this code. With those said, this commit implements: - Interpolation for most common types - Proper keyframe resolution (including the synthetic from-keyframe containing the initial state) - Properly driven animations, and proper style invalidation Co-Authored-By: Andreas Kling <kling@serenityos.org>
This commit is contained in:
parent
f07c4ffbc8
commit
e90752cc21
31 changed files with 1062 additions and 12 deletions
50
Base/res/html/misc/css-animations.html
Normal file
50
Base/res/html/misc/css-animations.html
Normal file
|
@ -0,0 +1,50 @@
|
|||
<style>
|
||||
.system {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.buggie {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
scale: 50%;
|
||||
opacity: 0;
|
||||
background: url(https://serenityos.org/buggie.png) no-repeat left center;
|
||||
background-size: contain;
|
||||
animation: buggie 10s linear infinite;
|
||||
}
|
||||
.offset-0 { animation-delay: 0.9s; }
|
||||
.offset-1 { animation-delay: 1.7s; }
|
||||
.offset-2 { animation-delay: 3.5s; }
|
||||
.offset-3 { animation-delay: 4.3s; }
|
||||
|
||||
.ladyball {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/LadyBall-SerenityOS.png/240px-LadyBall-SerenityOS.png) no-repeat left center;
|
||||
scale: 50%;
|
||||
animation: ladyball 9s linear infinite;
|
||||
}
|
||||
@keyframes buggie {
|
||||
0% { transform: translateX(0vw); opacity: 1; }
|
||||
50% { transform: translateX(100vw); opacity: 1; }
|
||||
100% { transform: translateX(0vw); opacity: 1; }
|
||||
}
|
||||
@keyframes ladyball {
|
||||
0% { transform: translateX(0vw); }
|
||||
50% { transform: translateX(100vw); }
|
||||
100% { transform: translateX(0vw); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=system>
|
||||
<div class="buggie offset-0"></div>
|
||||
<div class="buggie offset-1"></div>
|
||||
<div class="buggie offset-2"></div>
|
||||
<div class="buggie offset-3"></div>
|
||||
<div class="ladyball"></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue