Auto-hebergement_rdelaage
/
rdelaage.ovh
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved animations

This commit is contained in:
Romain de Laage 2020-01-31 18:01:34 +01:00
parent 29e6529b51
commit 9543272edb
1 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
anim.html Normal file → Executable file
View File

@ -26,6 +26,18 @@
animation-iteration-count: infinite;
animation-delay: 2s;
}
svg:hover #up{
animation-duration: 1s;
animation-name: sliceup;
}
svg:hover #down{
animation-duration: 1s;
animation-name: slicedown;
}
svg:hover #shrink{
animation-duration: 1s;
animation-name: shrinking;
}
@keyframes blue{
0%{
fill:#F0F0F0;
@ -59,14 +71,48 @@
fill:#F0F0F0;
}
}
@keyframes sliceup{
0%{
transform: translate(0, 0);
}
50%{
transform: translate(0, -10px);
}
100%{
transform: translate(0, 0);
}
}
@keyframes slicedown{
0%{
transform: translate(0, 0);
}
50%{
transform: translate(0, 10px);
}
100%{
transform: translate(0, 0);
}
}
@keyframes shrinking{
0%{
transform: scale(1, 1);
}
50%{
transform: scale(0.9, 1);
}
100%{
transform: scale(1, 1);
}
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
<g transform="translate(55,37)" id="content">
<g id="shrink">
<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
<rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
<circle id="red" r="25" cy="125" cx="90" fill="white" />
</g>
<g id="up"><rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" /></g>
<g id="down"><circle id="red" r="25" cy="125" cx="90" fill="white" /></g>
</g></g>
</svg>
</body>
</html>