From 441f53c280b28d20e92bda02750f283242522ba6 Mon Sep 17 00:00:00 2001 From: Theo Julienne Date: Tue, 23 Mar 2021 11:48:45 +1100 Subject: [PATCH 1/3] Add generic anim-rotate-360 class for use by view_components/spinner. --- src/utilities/animations.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/utilities/animations.scss b/src/utilities/animations.scss index bb1422eb70..90e880eebf 100644 --- a/src/utilities/animations.scss +++ b/src/utilities/animations.scss @@ -181,3 +181,17 @@ transform: scale(1.025); } } + +/* Rotate an element 360 degrees over and over, used for spinners */ +.anim-rotate-360 { + animation: rotate-360-keyframes 1s linear infinite; +} + +@keyframes rotate-360-keyframes { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} From e00e1ed9589acea82bc7b28a933793c661e82139 Mon Sep 17 00:00:00 2001 From: Theo Julienne Date: Tue, 23 Mar 2021 19:25:00 +1100 Subject: [PATCH 2/3] Reuse the anim-rotate name, and simplify the keyframes. --- src/utilities/animations.scss | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/utilities/animations.scss b/src/utilities/animations.scss index 90e880eebf..3e72b65dc8 100644 --- a/src/utilities/animations.scss +++ b/src/utilities/animations.scss @@ -183,15 +183,12 @@ } /* Rotate an element 360 degrees over and over, used for spinners */ -.anim-rotate-360 { - animation: rotate-360-keyframes 1s linear infinite; +.anim-rotate { + animation: rotate-keyframes 1s linear infinite; } -@keyframes rotate-360-keyframes { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); +@keyframes rotate-keyframes { + 100% { + transform: rotate(360deg); } } From f96a7c7fd2d7a3f4918de5cbb0a9667604ed8303 Mon Sep 17 00:00:00 2001 From: Theo Julienne Date: Tue, 23 Mar 2021 19:31:44 +1100 Subject: [PATCH 3/3] Update docs to include an octicon rotation example of anim-rotate. --- docs/content/utilities/animations.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/content/utilities/animations.md b/docs/content/utilities/animations.md index 06ddf315f9..e427f7d15f 100644 --- a/docs/content/utilities/animations.md +++ b/docs/content/utilities/animations.md @@ -97,3 +97,12 @@ The `.hover-grow` class will increase the scale of the element upon hover. ``` + +## Rotation + +The `.anim-rotate` class will rotate the element indefinitely around `0,0` or the coordinate specified by `transform-origin`. + +```html live + + +```