Skip to content

Commit

Permalink
update animate.css (v3.2.6).
Browse files Browse the repository at this point in the history
  • Loading branch information
@firede
firede committed May 11, 2015
1 parent 3bbc803 commit 602eb59
Showing 74 changed files with 359 additions and 192 deletions.
Empty file added demo/animate.html
View file
Empty file.
5 changes: 5 additions & 0 deletions demo/css/animate.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.test
animate('bounce')

.abc
animate('bounce', 0.5s)
9 changes: 6 additions & 3 deletions lib/rider/animate.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// animate
//
// @author firede(firede@firede.us)
// @desc ported from Animate.css v3
// @desc ported from Animate.css v3.2.6
// @see http://daneden.github.io/animate.css


@@ -18,12 +18,15 @@ animate($name, $duration = 1s, $fill-mode = both)
animation-fill-mode: $fill-mode

// process special animation
if $name in (flip flipInX flipInY flipOutX flipOutY)
if $name == bounce
transform-origin: center bottom
if $anme == flip
backface-visibility: visible
if $name in (flipInX flipInY flipOutX flipOutY)
backface-visibility: visible !important
if $name == lightSpeedIn
animation-timing-function: ease-out
if $name == lightSpeedOut
animation-timing-function: ease-in
if $name == swing
transform-origin: top center

17 changes: 11 additions & 6 deletions lib/rider/animate/bounce.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
@keyframes bounce
0%, 20%, 50%, 80%, 100%
transform: translateY(0)
40%
transform: translateY(-30px)
60%
transform: translateY(-15px)
0%, 20%, 53%, 80%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
transform: translate3d(0, 0, 0)
40%, 43%
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
transform: translate3d(0, -30px, 0)
70%
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
transform: translate3d(0, -15px, 0)
90%
transform: translate3d(0, -4px, 0)
18 changes: 12 additions & 6 deletions lib/rider/animate/bounceIn.styl
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
@keyframes bounceIn
0%, 20%, 40%, 60%, 80%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
0%
opacity: 0
transform: scale(.3)
50%
transform: scale3d(.3, .3, .3)
20%
transform: scale3d(1.1, 1.1, 1.1)
40%
transform: scale3d(.9, .9, .9)
60%
opacity: 1
transform: scale(1.05)
70%
transform: scale(.9)
transform: scale3d(1.03, 1.03, 1.03)
80%
transform: scale3d(.97, .97, .97)
100%
opacity: 1
transform: scale(1)
transform: scale3d(1, 1, 1)
14 changes: 9 additions & 5 deletions lib/rider/animate/bounceInDown.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@keyframes bounceInDown
0%, 60%, 75%, 90%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
0%
opacity: 0
transform: translateY(-2000px)
transform: translate3d(0, -3000px, 0)
60%
opacity: 1
transform: translateY(30px)
80%
transform: translateY(-10px)
transform: translate3d(0, 25px, 0)
75%
transform: translate3d(0, -10px, 0)
90%
transform: translate3d(0, 5px, 0)
100%
transform: translateY(0)
transform: none
14 changes: 9 additions & 5 deletions lib/rider/animate/bounceInLeft.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@keyframes bounceInLeft
0%, 60%, 75%, 90%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
0%
opacity: 0
transform: translateX(-2000px)
transform: translate3d(-3000px, 0, 0)
60%
opacity: 1
transform: translateX(30px)
80%
transform: translateX(-10px)
transform: translate3d(25px, 0, 0)
75%
transform: translate3d(-10px, 0, 0)
90%
transform: translate3d(5px, 0, 0)
100%
transform: translateX(0)
transform: none
14 changes: 9 additions & 5 deletions lib/rider/animate/bounceInRight.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@keyframes bounceInRight
0%, 60%, 75%, 90%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
0%
opacity: 0
transform: translateX(2000px)
transform: translate3d(3000px, 0, 0)
60%
opacity: 1
transform: translateX(-30px)
80%
transform: translateX(10px)
transform: translate3d(-25px, 0, 0)
75%
transform: translate3d(10px, 0, 0)
90%
transform: translate3d(-5px, 0, 0)
100%
transform: translateX(0)
transform: none
14 changes: 9 additions & 5 deletions lib/rider/animate/bounceInUp.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
@keyframes bounceInUp
0%, 60%, 75%, 90%, 100%
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
0%
opacity: 0
transform: translateY(2000px)
transform: translate3d(0, 3000px, 0)
60%
opacity: 1
transform: translateY(-30px)
80%
transform: translateY(10px)
transform: translate3d(0, -20px, 0)
75%
transform: translate3d(0, 10px, 0)
90%
transform: translate3d(0, -5px, 0)
100%
transform: translateY(0)
transform: translate3d(0, 0, 0)
12 changes: 5 additions & 7 deletions lib/rider/animate/bounceOut.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
@keyframes bounceOut
0%
transform: scale(1)
25%
transform: scale(.95)
50%
20%
transform: scale3d(.9, .9, .9)
50%, 55%
opacity: 1
transform: scale(1.1)
transform: scale3d(1.1, 1.1, 1.1)
100%
opacity: 0
transform: scale(.3)
transform: scale3d(.3, .3, .3)
8 changes: 4 additions & 4 deletions lib/rider/animate/bounceOutDown.styl
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@keyframes bounceOutDown
0%
transform: translateY(0)
20%
transform: translate3d(0, 10px, 0)
40%, 45%
opacity: 1
transform: translateY(-20px)
transform: translate3d(0, -20px, 0)
100%
opacity: 0
transform: translateY(2000px)
transform: translate3d(0, 2000px, 0)
6 changes: 2 additions & 4 deletions lib/rider/animate/bounceOutLeft.styl
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@keyframes bounceOutLeft
0%
transform: translateX(0)
20%
opacity: 1
transform: translateX(20px)
transform: translate3d(20px, 0, 0)
100%
opacity: 0
transform: translateX(-2000px)
transform: translate3d(-2000px, 0, 0)
6 changes: 2 additions & 4 deletions lib/rider/animate/bounceOutRight.styl
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@keyframes bounceOutRight
0%
transform: translateX(0)
20%
opacity: 1
transform: translateX(-20px)
transform: translate3d(-20px, 0, 0)
100%
opacity: 0
transform: translateX(2000px)
transform: translate3d(2000px, 0, 0)
8 changes: 4 additions & 4 deletions lib/rider/animate/bounceOutUp.styl
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@keyframes bounceOutUp
0%
transform: translateY(0)
20%
transform: translate3d(0, -10px, 0)
40%, 45%
opacity: 1
transform: translateY(20px)
transform: translate3d(0, 20px, 0)
100%
opacity: 0
transform: translateY(-2000px)
transform: translate3d(0, -2000px, 0)
4 changes: 2 additions & 2 deletions lib/rider/animate/fadeInDown.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@keyframes fadeInDown
0%
opacity: 0
transform: translateY(-20px)
transform: translate3d(0, -100%, 0)
100%
opacity: 1
transform: translateY(0)
transform: none
7 changes: 7 additions & 0 deletions lib/rider/animate/fadeInDownBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@keyframes fadeInDownBig
0%
opacity: 0
transform: translate3d(0, -2000px, 0)
100%
opacity: 1
transform: none
4 changes: 2 additions & 2 deletions lib/rider/animate/fadeInLeft.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@keyframes fadeInLeft
0%
opacity: 0
transform: translateX(-20px)
transform: translate3d(-100%, 0, 0)
100%
opacity: 1
transform: translateX(0)
transform: none
7 changes: 7 additions & 0 deletions lib/rider/animate/fadeInLeftBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@keyframes fadeInLeftBig
0%
opacity: 0
transform: translate3d(-2000px, 0, 0)
100%
opacity: 1
transform: none
4 changes: 2 additions & 2 deletions lib/rider/animate/fadeInRight.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@keyframes fadeInRight
0%
opacity: 0
transform: translateX(20px)
transform: translate3d(100%, 0, 0)
100%
opacity: 1
transform: translateX(0)
transform: none
7 changes: 7 additions & 0 deletions lib/rider/animate/fadeInRightBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@keyframes fadeInRightBig
0%
opacity: 0
transform: translate3d(2000px, 0, 0)
100%
opacity: 1
transform: none
4 changes: 2 additions & 2 deletions lib/rider/animate/fadeInUp.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@keyframes fadeInUp
0%
opacity: 0
transform: translateY(20px)
transform: translate3d(0, 100%, 0)
100%
opacity: 1
transform: translateY(0)
transform: none
7 changes: 7 additions & 0 deletions lib/rider/animate/fadeInUpBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@keyframes fadeInUpBig
0%
opacity: 0
transform: translate3d(0, 2000px, 0)
100%
opacity: 1
transform: none
3 changes: 1 addition & 2 deletions lib/rider/animate/fadeOutDown.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@keyframes fadeOutDown
0%
opacity: 1
transform: translateY(0)
100%
opacity: 0
transform: translateY(20px)
transform: translate3d(0, 100%, 0)
6 changes: 6 additions & 0 deletions lib/rider/animate/fadeOutDownBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@keyframes fadeOutDownBig
0%
opacity: 1
100%
opacity: 0
transform: translate3d(0, 2000px, 0)
3 changes: 1 addition & 2 deletions lib/rider/animate/fadeOutLeft.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@keyframes fadeOutLeft
0%
opacity: 1
transform: translateX(0)
100%
opacity: 0
transform: translateX(-20px)
transform: translate3d(-100%, 0, 0)
6 changes: 6 additions & 0 deletions lib/rider/animate/fadeOutLeftBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@keyframes fadeOutLeftBig
0%
opacity: 1
100%
opacity: 0
transform: translate3d(-2000px, 0, 0)
3 changes: 1 addition & 2 deletions lib/rider/animate/fadeOutRight.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@keyframes fadeOutRight
0%
opacity: 1
transform: translateX(0)
100%
opacity: 0
transform: translateX(20px)
transform: translate3d(100%, 0, 0)
6 changes: 6 additions & 0 deletions lib/rider/animate/fadeOutRightBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@keyframes fadeOutRightBig
0%
opacity: 1
100%
opacity: 0
transform: translate3d(2000px, 0, 0)
3 changes: 1 addition & 2 deletions lib/rider/animate/fadeOutUp.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@keyframes fadeOutUp
0%
opacity: 1
transform: translateY(0)
100%
opacity: 0
transform: translateY(-20px)
transform: translate3d(0, -100%, 0)
6 changes: 6 additions & 0 deletions lib/rider/animate/fadeOutUpBig.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@keyframes fadeOutUpBig
0%
opacity: 1
100%
opacity: 0
transform: translate3d(0, -2000px, 0)
10 changes: 5 additions & 5 deletions lib/rider/animate/flip.styl
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
@keyframes flip
0%
transform: perspective(400px) translateZ(0) rotateY(0) scale(1)
transform: perspective(400px) rotate3d(0, 1, 0, -360deg)
animation-timing-function: ease-out
40%
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
animation-timing-function: ease-out
50%
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
animation-timing-function: ease-in
80%
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95)
transform: perspective(400px) scale3d(.95, .95, .95)
animation-timing-function: ease-in
100%
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1)
transform: perspective(400px)
animation-timing-function: ease-in
Loading

0 comments on commit 602eb59

Please sign in to comment.