1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-24 02:06:17 +01:00
blog/_src/_assets/styl/_kremalicious/animations.styl

65 lines
1.1 KiB
Stylus

//
// kremalicious3
// --------------
// Animations
//
// Buttery Smooth(tm)
////////////////////////////////////
gpuacceleration()
-webkit-transform: translate3d(0,0,0)
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
.gpuacceleration
gpuacceleration()
// Slide Up
////////////////////////////////////
@keyframes slideUp
0%
transform: translate3d(0, 100px, 0)
opacity: 0
100%
transform: translate3d(0, 0, 0)
opacity: 1
.animation-slideup
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
//
// Bounce
//
// taken and adapted from
// http://daneden.github.io/animate.css/
////////////////////////////////////
// Down
@keyframes slideDown
0%
transform: translate3d(0, -100px, 0)
100%
transform: none
.animation-slidedown
animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
// Up
@keyframes bounceOutUp
20%
transform: translate3d(0, -10px, 0)
40%, 45%
transform: translate3d(0, 20px, 0)
100%
transform: translate3d(0, -100px, 0)
.animation-bounceOutUp
animation: bounceOutUp .5s both