about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2019-10-24 22:47:48 +0200
committerEugen Rochko <eugen@zeonfederated.com>2019-10-24 22:47:48 +0200
commit3a929dbedd31ea67723746bdf387e22e66e247cd (patch)
treebe715974d9914ee8b252300e3debf4cc7883a9a2 /app/javascript/styles
parent547a5bac9d9c909b306933596bc121b63809d772 (diff)
Replace fav icon animation with CSS (#12175)
Fixes #12151
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/mastodon/components.scss58
1 files changed, 58 insertions, 0 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0fe86bf16..52fe3bed0 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1591,6 +1591,20 @@ a.account__display-name {
   color: $gold-star;
 }
 
+.no-reduce-motion .icon-button.star-icon {
+  &.activate {
+    & > .fa-star {
+      animation: spring-rotate-in 1s linear;
+    }
+  }
+
+  &.deactivate {
+    & > .fa-star {
+      animation: spring-rotate-out 1s linear;
+    }
+  }
+}
+
 .notification__display-name {
   color: inherit;
   font-weight: 500;
@@ -3373,6 +3387,50 @@ a.status-card.compact:hover {
   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
+@keyframes spring-rotate-in {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  30% {
+    transform: rotate(-484.8deg);
+  }
+
+  60% {
+    transform: rotate(-316.7deg);
+  }
+
+  90% {
+    transform: rotate(-375deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@keyframes spring-rotate-out {
+  0% {
+    transform: rotate(-360deg);
+  }
+
+  30% {
+    transform: rotate(124.8deg);
+  }
+
+  60% {
+    transform: rotate(-43.27deg);
+  }
+
+  90% {
+    transform: rotate(15deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 @keyframes loader-figure {
   0% {
     width: 0;