diff options
| author | Ali Mohammad Pur <ali.mpfard@gmail.com> | 2023-05-26 23:30:54 +0330 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-05-29 05:35:41 +0200 |
| commit | e90752cc21961b531a94abb4b33e238670dd6d48 (patch) | |
| tree | 568577d2c950ef76b6e83156b8dd10826e9be1c5 /Base/res | |
| parent | f07c4ffbc840b3c79c0f2fd52b41d95bcfa35e91 (diff) | |
| download | serenity-e90752cc21961b531a94abb4b33e238670dd6d48.zip | |
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>
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/css-animations.html | 50 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 51 insertions, 0 deletions
diff --git a/Base/res/html/misc/css-animations.html b/Base/res/html/misc/css-animations.html new file mode 100644 index 0000000000..99862f96c1 --- /dev/null +++ b/Base/res/html/misc/css-animations.html @@ -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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 1ed1c42dbd..800828bb20 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -163,6 +163,7 @@ <li><a href="inline-node.html">Styling "inline" elements</a></li> <li><a href="pseudo-elements.html">Pseudo-elements (::before, ::after, etc)</a></li> <li><a href="effects_with_opacity_and_transforms.html">Effects with opacity and transforms</a></li> + <li><a href="css-animations.html">CSS Animations</a></li> </ul> <h2>JavaScript/Wasm</h2> |