mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 16:32:45 +00:00
0c14698028
This implements all the timing functions, and hopefully all their quirks. Also changes the animation demo to use some funny cubic timing functions.
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 cubic-bezier(0.1, -0.6, 0.2, -0.2) 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 ease-in-out 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>
|