From 9543272edb464cae6ceacfd86d0fa4dd2da6a46b Mon Sep 17 00:00:00 2001 From: Romain de Laage Date: Fri, 31 Jan 2020 18:01:34 +0100 Subject: [PATCH] Improved animations --- anim.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 3 deletions(-) mode change 100644 => 100755 anim.html diff --git a/anim.html b/anim.html old mode 100644 new mode 100755 index 427c748..e5a2f0d --- a/anim.html +++ b/anim.html @@ -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); + } + } + - - - + + +