1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 09:35:21 +01:00
blog/_src/_assets/styl/_kremalicious/animations.styl

65 lines
1.1 KiB
Stylus
Raw Normal View History

2014-07-12 21:22:47 +02:00
//
// kremalicious3
// --------------
// Animations
//
// Buttery Smooth(tm)
////////////////////////////////////
gpuacceleration()
-webkit-transform: translate3d(0,0,0)
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
.gpuacceleration
gpuacceleration()
2016-06-09 19:25:01 +02:00
// Slide Up
2014-07-12 21:22:47 +02:00
////////////////////////////////////
2016-06-09 19:25:01 +02:00
@keyframes slideUp
2014-07-12 21:22:47 +02:00
0%
2016-06-09 19:25:01 +02:00
transform: translate3d(0, 100px, 0)
2014-07-12 21:22:47 +02:00
opacity: 0
2014-07-13 22:21:56 +02:00
2016-06-09 19:25:01 +02:00
100%
transform: translate3d(0, 0, 0)
opacity: 1
.animation-slideup
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
2015-11-19 16:24:15 +01:00
2014-07-13 22:21:56 +02:00
//
// Bounce
//
// taken and adapted from
// http://daneden.github.io/animate.css/
////////////////////////////////////
// Down
2014-08-10 00:26:08 +02:00
@keyframes slideDown
2014-07-13 22:21:56 +02:00
0%
transform: translate3d(0, -100px, 0)
100%
transform: none
2016-06-09 19:25:01 +02:00
.animation-slidedown
animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
2014-07-13 22:21:56 +02:00
// Up
@keyframes bounceOutUp
20%
transform: translate3d(0, -10px, 0)
40%, 45%
transform: translate3d(0, 20px, 0)
100%
transform: translate3d(0, -100px, 0)
2015-11-28 01:19:31 +01:00
.animation-bounceOutUp
2014-07-13 22:21:56 +02:00
animation: bounceOutUp .5s both