Skip to content

Instantly share code, notes, and snippets.

@ear1grey

ear1grey/transforms.html

Created December 8, 2022 09:39
Show Gist options
  • Save ear1grey/028f7d96b6e170f18a3ea928587ec635 to your computer and use it in GitHub Desktop.
Save ear1grey/028f7d96b6e170f18a3ea928587ec635 to your computer and use it in GitHub Desktop.
Download ZIP
Example of how transform order can alter results.
Raw
transforms.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="description" content="Transformation order is important.">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#red {
fill: red;
animation: redanim 2s infinite;
}
#blue {
fill: blue;
animation: blueanim 2s infinite;
}
@keyframes redanim {
0% { transform: scale(1, 1) translateY(0px); }
50% { transform: scale(0,0) translateY(400px); }
100% { transform: scale(1,1) translateY(0px); }
}
@keyframes blueanim {
0% { transform: translateY(0px) scale(1, 1) ; }
50% { transform: translateY(400px) scale(0,0) ; }
100% { transform: translateY(0px) scale(1,1); }
}
</style>
<svg width=100 height=500 viewbox="-50 -50 100 500">
<circle r=50 id=red>
</svg>
<svg width=100 height=500 viewbox="-50 -50 100 500">
<circle r=50 id=blue>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment