mirror of
https://github.com/RGBCube/serenity
synced 2025-05-30 23:08:11 +00:00
e90752cc21
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>
50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<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>
|