Created
August 8, 2015 16:40
-
-
Save baranok/a2a23bc78e5b68d59b27 to your computer and use it in GitHub Desktop.
Some transition timing funcs from firefox, some custom by me and two animations
This file contains hidden or 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
.easing.quartic-in { | |
transition-timing-function: cubic-bezier(0.9,0.03,0.69,0.22); | |
} | |
.easing.quintic-in { | |
transition-timing-function: cubic-bezier(0.76,0.05,0.86,0.06); | |
} | |
.easing.exponential-in { | |
transition-timing-function: cubic-bezier(0.95,0.05,0.8,0.04); | |
} | |
.easing.circular-in { | |
transition-timing-function: cubic-bezier(0.6,0.04,0.98,0.34); | |
} | |
.easing.backward-in { | |
transition-timing-function: cubic-bezier(0.6,-0.28,0.74,0.05); | |
} | |
.easing.quartic-out { | |
transition-timing-function: cubic-bezier(0.17,0.84,0.44,1); | |
} | |
.easing.quintic-out { | |
transition-timing-function: cubic-bezier(0.23,1,0.32,1); | |
} | |
.easing.exponential-out { | |
transition-timing-function: cubic-bezier(0.19,1,0.22,1); | |
} | |
.easing.circular-out { | |
transition-timing-function: cubic-bezier(0.08,0.82,0.17,1); | |
} | |
.easing.backward-out { | |
transition-timing-function: cubic-bezier(0.18,0.89,0.32,1.28); | |
} | |
.easing.quartic-in-out { | |
transition-timing-function: cubic-bezier(0.77,0,0.18,1); | |
} | |
.easing.quintic-in-out { | |
transition-timing-function: cubic-bezier(0.86,0,0.07,1); | |
} | |
.easing.exponential-in-out { | |
transition-timing-function: cubic-bezier(1,0,0,1); | |
} | |
.easing.circular-in-out { | |
transition-timing-function: cubic-bezier(0.79,0.14,0.15,0.86); | |
} | |
.easing.backward-in-out { | |
transition-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55); | |
} | |
/* Starts very fast then bounce back a bit in slower mannerism, good for translate 1-2s */ | |
.easing.custom1 { | |
transition-timing-function: cubic-bezier(0.000, 1.650, 0.250, 0.940); | |
} | |
/* Starts very slow and accelerating then bounce back pretty slow, good for translate 0.5s */ | |
.easing.custom2 { | |
transition-timing-function: cubic-bezier(0.885, 0.245, 0.075, 1.585); | |
} | |
/* Similar to the two above but very smooth also with bounce back, good for translate 0.3-1s */ | |
.easing.custom3 { | |
transition-timing-function: cubic-bezier(0.410, 1.650, 0.320, 1); | |
} | |
@keyframes jello{ | |
11.1%{ | |
-webkit-transform:none; | |
transform:none | |
} | |
22.2%{ | |
-webkit-transform:skewX(-12.5deg) skewY(-12.5deg); | |
transform:skewX(-12.5deg) skewY(-12.5deg) | |
} | |
33.3%{ | |
-webkit-transform:skewX(6.25deg) skewY(6.25deg); | |
transform:skewX(6.25deg) skewY(6.25deg) | |
} | |
44.4%{ | |
-webkit-transform:skewX(-3.125deg) skewY(-3.125deg); | |
transform:skewX(-3.125deg) skewY(-3.125deg) | |
} | |
55.5%{ | |
-webkit-transform:skewX(1.5625deg) skewY(1.5625deg); | |
transform:skewX(1.5625deg) skewY(1.5625deg) | |
} | |
66.6%{ | |
-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg); | |
transform:skewX(-0.78125deg) skewY(-0.78125deg) | |
} | |
77.7%{ | |
-webkit-transform:skewX(0.390625deg) skewY(0.390625deg); | |
transform:skewX(0.390625deg) skewY(0.390625deg) | |
} | |
88.8%{ | |
-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform:skewX(-0.1953125deg) skewY(-0.1953125deg) | |
} | |
100%{ | |
-webkit-transform:none; | |
transform:none | |
} | |
} | |
.jello{ | |
-webkit-animation-name:jello; | |
-moz-animation-name:jello; | |
animation-name:jello; | |
-webkit-transform-origin:center; | |
transform-origin:center | |
} | |
@keyframes jiggle { | |
0% { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(0.95, 1.05, 1); | |
transform: scale3d(0.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, 0.95, 1); | |
transform: scale3d(1.05, 0.95, 1); | |
} | |
100% { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.jiggle.transition { | |
-webkit-animation-duration: 750ms; | |
animation-duration: 750ms; | |
-webkit-animation-name: jiggle; | |
animation-name: jiggle; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment