Created
August 27, 2014 17:12
-
-
Save okolehao/702facfa3c55d6f753b8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=ease($property, $duration) | |
+transition($property $duration cubic-bezier(0.42, 0, 0.58, 1)) | |
=cubic | |
-webkit-timing-function: cubic-bezier(0.42, 0, 0.58, 1) | |
timing-function: cubic-bezier(0.42, 0, 0.58, 1) | |
=animation-delay($delay) | |
-webkit-animation-delay: $delay | |
-moz-animation-delay: $delay | |
-o-animation-delay: $delay | |
animation-delay: $delay | |
=animation-repeat($count) | |
animation-iteration-count: $count | |
-moz-animation-iteration-count: $count | |
-webkit-animation-iteration-count: $count | |
-o-animation-iteration-count: $count | |
=animation-duration($time) | |
animation-duration: $time | |
-moz-animation-duration: $time | |
-webkit-animation-duration: $time | |
-o-animation-duration: $time | |
=animation-fill-mode($mode) | |
animation-fill-mode: $mode | |
-webkit-animation-fill-mode: $mode | |
// fadein single view | |
@-webkit-keyframes viewfade | |
0% | |
+opacity(.2) | |
100% | |
+opacity(1) | |
@keyframes viewfade | |
0% | |
+opacity(.2) | |
100% | |
+opacity(1) | |
// fadein discover module container | |
@-webkit-keyframes tile-fade | |
0% | |
+opacity(0) | |
100% | |
+opacity(1) | |
@keyframes tile-fade | |
0% | |
+opacity(0) | |
100% | |
+opacity(1) | |
// animate .icon-spinner | |
@-webkit-keyframes animate-spinner | |
0% | |
-webkit-transform: rotate(0deg) scale(.6) | |
+opacity(.1) | |
50% | |
-webkit-transform: rotate(179deg) scale(1) | |
+opacity(1) | |
100% | |
-webkit-transform: rotate(359deg) scale(.6) | |
+opacity(.1) | |
@keyframes animate-spinner | |
0% | |
transform: rotate(0deg) scale(.6) | |
+opacity(.1) | |
50% | |
transform: rotate(179deg) scale(1) | |
+opacity(1) | |
100% | |
transform: rotate(359deg) scale(.6) | |
+opacity(.1) | |
// fade then hide .msg on discover-publish-actions icons | |
@-webkit-keyframes publish-msg | |
0% | |
+opacity(1) | |
100% | |
+opacity(0) | |
+scale(4) | |
@-keyframes publish-msg | |
0% | |
+opacity(1) | |
100% | |
+opacity(0) | |
+scale(4) | |
// bounce publish-pool-count | |
@-webkit-keyframes publish-bounce | |
0% | |
+scale(1) | |
50% | |
+scale(1.2) | |
100% | |
+scale(1) | |
@-keyframes publish-bounce | |
0% | |
+scale(1) | |
50% | |
+scale(1.2) | |
100% | |
+scale(1) | |
// fade publish-pool background when story is added | |
@-webkit-keyframes publish-flicker | |
0% | |
background: $white | |
50% | |
background: $publish-pool-active | |
100% | |
background: $white | |
@-keyframes publish-flicker | |
0% | |
background: $white | |
50% | |
background: $publish-pool-active | |
100% | |
background: $white | |
// pulsing div | |
@-moz-keyframes pulsate | |
0% | |
background-color: whitesmoke | |
50% | |
background-color: $white | |
-moz-box-shadow: 0 0 2px $grayish | |
box-shadow: 0 0 2px $grayish | |
100% | |
background-color: whitesmoke | |
@-keyframes pulsate | |
0% | |
background-color: whitesmoke | |
50% | |
background-color: $white | |
box-shadow: 0 0 2px $grayish | |
100% | |
background-color: whitesmoke | |
@-webkit-keyframes pulsate | |
0% | |
background-color: whitesmoke | |
50% | |
background-color: $white | |
-webkit-box-shadow: 0 0 2px $grayish | |
100% | |
background-color: whitesmoke | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment