mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 03:07:43 +00:00
LibWeb: Fully implement CSS animation-timing-function
This implements all the timing functions, and hopefully all their quirks. Also changes the animation demo to use some funny cubic timing functions.
This commit is contained in:
parent
efa55673cd
commit
0c14698028
4 changed files with 237 additions and 13 deletions
|
@ -14,7 +14,7 @@
|
|||
opacity: 0;
|
||||
background: url(https://serenityos.org/buggie.png) no-repeat left center;
|
||||
background-size: contain;
|
||||
animation: buggie 10s linear infinite;
|
||||
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; }
|
||||
|
@ -27,7 +27,7 @@
|
|||
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;
|
||||
animation: ladyball 9s ease-in-out infinite;
|
||||
}
|
||||
@keyframes buggie {
|
||||
0% { transform: translateX(0vw); opacity: 1; }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue