hyTags
Animation Example
Overview
This example demonstrates CSS animations using hyTags. Click the button to animate the car across the screen.
The animation uses
style-animate to smoothly transition the car's position, and
function-delay to add a short pause before the animation starts.
<button>Go</button>
<on click>
<selection-change next-sibling="div">
<selection-change first-child="car">
<style-set name="position" value="absolute">
<style-set name="right" value="0px">
<function-delay seconds="0.2">
<style-animate duration="0.5">
<style-set name="right" value="calc(100% - 50px)">
</style-animate>
</on>
<div style="position: relative; font-size: 44px; width: 100%">
<car style="display: inline-block">🏎️</car>
</div>
Explanation
- selection-change: Navigates the selection to a different element. Here it first moves to the sibling
div, then to the childcarelement. - style-set: Sets a CSS property on the current selection. Used here to set the initial position before animating.
- function-delay: Pauses execution for the specified duration. Creates a brief delay before the animation starts.
- style-animate: Animates CSS property changes over the specified duration. Style changes inside the block are transitioned smoothly.
