mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 18:18:49 +02:00
90 lines
1.5 KiB
Stylus
90 lines
1.5 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Animations
|
|
//
|
|
|
|
// Buttery Smooth(tm)
|
|
////////////////////////////////////
|
|
|
|
gpuacceleration()
|
|
-webkit-transform: translate3d(0,0,0)
|
|
-webkit-backface-visibility: hidden
|
|
-webkit-perspective: 1000
|
|
|
|
.gpuacceleration
|
|
gpuacceleration()
|
|
|
|
|
|
// Masonry
|
|
////////////////////////////////////
|
|
|
|
.masonry
|
|
transition-property: height, width
|
|
|
|
&,
|
|
.masonry-brick
|
|
transition-duration: 0.7s
|
|
|
|
.masonry-brick
|
|
transition-property: left, right, top
|
|
|
|
|
|
// Loading Thingy
|
|
////////////////////////////////////
|
|
|
|
.loading
|
|
@extend .gpuacceleration
|
|
animation: loadingThingy .2s infinite
|
|
|
|
@keyframes loadingThingy
|
|
0%
|
|
opacity: 1
|
|
100%
|
|
opacity: 0
|
|
|
|
//
|
|
// Bounce
|
|
//
|
|
// taken and adapted from
|
|
// http://daneden.github.io/animate.css/
|
|
////////////////////////////////////
|
|
|
|
// Down
|
|
@keyframes bounceInDown
|
|
0%, 60%, 75%, 90%, 100%
|
|
// http://cubic-bezier.com/#.06,.85,.54,1.39
|
|
transition-timing-function: cubic-bezier(.06,.85,.54,1)
|
|
|
|
0%
|
|
transform: translate3d(0, -100px, 0)
|
|
|
|
60%
|
|
transform: translate3d(0, 20px, 0)
|
|
|
|
75%
|
|
transform: translate3d(0, -10px, 0)
|
|
|
|
90%
|
|
transform: translate3d(0, 5px, 0)
|
|
|
|
100%
|
|
transform: none
|
|
|
|
.bounceInDown
|
|
animation: bounceInDown .4s both
|
|
|
|
// Up
|
|
@keyframes bounceOutUp
|
|
20%
|
|
transform: translate3d(0, -10px, 0)
|
|
|
|
40%, 45%
|
|
transform: translate3d(0, 20px, 0)
|
|
|
|
100%
|
|
transform: translate3d(0, -100px, 0)
|
|
|
|
.bounceOutUp
|
|
animation: bounceOutUp .5s both
|