From b4e7e16a49ec28d7eac5fd9d0dfd5a1879ed4b23 Mon Sep 17 00:00:00 2001 From: Julian Bauer Date: Mon, 28 Jan 2019 14:33:13 +0100 Subject: [PATCH] new easing --- src/components/LoadingSpinner.vue | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue index a104bec1..c6c51d46 100644 --- a/src/components/LoadingSpinner.vue +++ b/src/components/LoadingSpinner.vue @@ -20,21 +20,32 @@ export default class LoadingSpinner extends Vue {} #big-hex { stroke-dashoffset: -40.5; - animation: big-hex 3s linear infinite; + animation: big-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite; } #small-hex { stroke-dashoffset: 13; - animation: small-hex 3s linear infinite; + animation: small-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite; } - @keyframes big-hex { - from { stroke-dashoffset: -40.5 } - to { stroke-dashoffset: 112 } + @keyframes small-hex { + 0% { stroke-dashoffset: 13 } + 17% { stroke-dashoffset: 38.42 } + 33% { stroke-dashoffset: 63.84 } + 50% { stroke-dashoffset: 89.25 } + 67% { stroke-dashoffset: 114.66 } + 83% { stroke-dashoffset: 140.08 } + 100% { stroke-dashoffset: 165.5 } } - @keyframes small-hex { - from { stroke-dashoffset: 13 } - to { stroke-dashoffset: 165.5 } + @keyframes big-hex { + 0% { stroke-dashoffset: -40.5 } + 17% { stroke-dashoffset: -15.08 } + 33% { stroke-dashoffset: 10.33 } + 50% { stroke-dashoffset: 35.75 } + 67% { stroke-dashoffset: 61.17 } + 83% { stroke-dashoffset: 86.58 } + 100% { stroke-dashoffset: 112 } } +