Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added more animation ideas

  • Loading branch information...
commit 6cbf267c5d300ce13435c20f6e040f44ec3312a2 1 parent c2a19fe
Nicholas Pettit authored
BIN  .sass-cache/1c4ace758257563d9070eeeb618e53419fb49e35/glide.scssc
View
Binary file not shown
76 sass/glide.scss
View
@@ -16,16 +16,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0);
- - Use cubic-bezier function on bounce, instead of keyframes
+ - Use cubic-bezier function on bounce, instead of keyframes?
- Seems to be broken in Safari.
Animation Ideas:
- - Flashbulb?
- - Bounce
+ - Flashbulb
+ - Flickering light bulb
+ - Slot machine?
+ - Spinning lottery ball
+ - Comet Trails (box shadow)
+ - whirling red siren (box shadow)
+ - fire (box shadow)
+ - energy ball (box shadow)
+ - cool ice (box shadow)
+ - smoke (box shadow)
+ - wave (border radius around an element?)
+ - circle with waves
- Earthquake
- - Wipes
- - Barbershop
+ - Wipes?
*******************************************************************************/
@@ -734,33 +743,33 @@ Animation Ideas:
0% {
opacity: 0;
-webkit-transform: translateY($start);
- -webkit-box-shadow:-30px 40px 0px -30px rgba(255,255,255,0),
- 0px 40px 0px -30px rgba(255,255,255,0),
- 30px 40px 0px -30px rgba(255,255,255,0);
+ -webkit-box-shadow: -30px 40px 0px -30px rgba(255,255,255,0),
+ 0px 40px 0px -30px rgba(255,255,255,0),
+ 30px 40px 0px -30px rgba(255,255,255,0);
}
20% {
opacity: 0;
-webkit-transform: translateY($start);
- -webkit-box-shadow:-30px 40px 0px -30px rgba(255,255,255,0),
- 0px 40px 0px -30px rgba(255,255,255,0),
- 30px 40px 0px -30px rgba(255,255,255,0);
+ -webkit-box-shadow: -30px 40px 0px -30px rgba(255,255,255,0),
+ 0px 40px 0px -30px rgba(255,255,255,0),
+ 30px 40px 0px -30px rgba(255,255,255,0);
}
25% {
opacity: 1;
-webkit-transform: translateY($end);
- -webkit-box-shadow:-50px 60px 0px -30px rgba(255,255,255,0),
- 0px 60px 0px -30px rgba(255,255,255,0),
- 50px 60px 0px -30px rgba(255,255,255,0);
+ -webkit-box-shadow: -50px 60px 0px -30px rgba(255,255,255,0),
+ 0px 60px 0px -30px rgba(255,255,255,0),
+ 50px 60px 0px -30px rgba(255,255,255,0);
}
29% {
- -webkit-box-shadow:-70px 80px 70px -30px rgba(255,255,255,.5),
- 0px 80px 70px -30px rgba(255,255,255,.7),
- 70px 80px 70px -30px rgba(255,255,255,.6);
+ -webkit-box-shadow: -70px 80px 70px -30px rgba(255,255,255,.5),
+ 0px 80px 70px -30px rgba(255,255,255,.7),
+ 70px 80px 70px -30px rgba(255,255,255,.6);
}
100% {
- -webkit-box-shadow:-100px 90px 120px -10px rgba(255,255,255,.0),
- 0px 90px 120px -10px rgba(255,255,255,.0),
- 100px 90px 120px -10px rgba(255,255,255,.0);
+ -webkit-box-shadow: -100px 90px 120px -10px rgba(255,255,255,.0),
+ 0px 90px 120px -10px rgba(255,255,255,.0),
+ 100px 90px 120px -10px rgba(255,255,255,.0);
}
}
@@ -769,12 +778,34 @@ Animation Ideas:
0% {
opacity: 0;
-moz-transform: translateY($start);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255,255,255,0),
+ 0px 40px 0px -30px rgba(255,255,255,0),
+ 30px 40px 0px -30px rgba(255,255,255,0);
}
- 10% {
+ 20% {
+ opacity: 0;
+ -moz-transform: translateY($start);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255,255,255,0),
+ 0px 40px 0px -30px rgba(255,255,255,0),
+ 30px 40px 0px -30px rgba(255,255,255,0);
+ }
+ 25% {
opacity: 1;
+ -moz-transform: translateY($end);
+ -moz-box-shadow: -50px 60px 0px -30px rgba(255,255,255,0),
+ 0px 60px 0px -30px rgba(255,255,255,0),
+ 50px 60px 0px -30px rgba(255,255,255,0);
+ }
+ 29% {
+ -moz-box-shadow: -70px 80px 70px -30px rgba(255,255,255,.5),
+ 0px 80px 70px -30px rgba(255,255,255,.7),
+ 70px 80px 70px -30px rgba(255,255,255,.6);
}
100% {
- -moz-transform: translateY($end);
+ -moz-box-shadow: -100px 90px 120px -10px rgba(255,255,255,.0),
+ 0px 90px 120px -10px rgba(255,255,255,.0),
+ 100px 90px 120px -10px rgba(255,255,255,.0);
+
}
}
@@ -824,6 +855,7 @@ Animation Ideas:
}
+
@include fade_keyframes;
@include spin_keyframes;
@include pulse_keyframes;
38 stylesheets/glide.css
View
@@ -14,16 +14,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0);
- - Use cubic-bezier function on bounce, instead of keyframes
+ - Use cubic-bezier function on bounce, instead of keyframes?
- Seems to be broken in Safari.
Animation Ideas:
- - Flashbulb?
- - Bounce
+ - Flashbulb
+ - Flickering light bulb
+ - Slot machine?
+ - Spinning lottery ball
+ - Comet Trails (box shadow)
+ - whirling red siren (box shadow)
+ - fire (box shadow)
+ - energy ball (box shadow)
+ - cool ice (box shadow)
+ - smoke (box shadow)
+ - wave (border radius around an element?)
+ - circle with waves
- Earthquake
- - Wipes
- - Barbershop
+ - Wipes?
*******************************************************************************/
@@ -510,13 +519,24 @@ Animation Ideas:
@-moz-keyframes stomp {
0% {
opacity: 0;
- -moz-transform: translateY(-100%); }
+ -moz-transform: translateY(-100%);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0), 0px 40px 0px -30px rgba(255, 255, 255, 0), 30px 40px 0px -30px rgba(255, 255, 255, 0); }
- 10% {
- opacity: 1; }
+ 20% {
+ opacity: 0;
+ -moz-transform: translateY(-100%);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0), 0px 40px 0px -30px rgba(255, 255, 255, 0), 30px 40px 0px -30px rgba(255, 255, 255, 0); }
+
+ 25% {
+ opacity: 1;
+ -moz-transform: translateY(0px);
+ -moz-box-shadow: -50px 60px 0px -30px rgba(255, 255, 255, 0), 0px 60px 0px -30px rgba(255, 255, 255, 0), 50px 60px 0px -30px rgba(255, 255, 255, 0); }
+
+ 29% {
+ -moz-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); }
100% {
- -moz-transform: translateY(0px); } }
+ -moz-box-shadow: -100px 90px 120px -10px rgba(255, 255, 255, 0), 0px 90px 120px -10px rgba(255, 255, 255, 0), 100px 90px 120px -10px rgba(255, 255, 255, 0); } }
@-webkit-keyframes glide {
0% {
38 stylesheets/screen.css
View
@@ -14,16 +14,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0);
- - Use cubic-bezier function on bounce, instead of keyframes
+ - Use cubic-bezier function on bounce, instead of keyframes?
- Seems to be broken in Safari.
Animation Ideas:
- - Flashbulb?
- - Bounce
+ - Flashbulb
+ - Flickering light bulb
+ - Slot machine?
+ - Spinning lottery ball
+ - Comet Trails (box shadow)
+ - whirling red siren (box shadow)
+ - fire (box shadow)
+ - energy ball (box shadow)
+ - cool ice (box shadow)
+ - smoke (box shadow)
+ - wave (border radius around an element?)
+ - circle with waves
- Earthquake
- - Wipes
- - Barbershop
+ - Wipes?
*******************************************************************************/
@@ -510,13 +519,24 @@ Animation Ideas:
@-moz-keyframes stomp {
0% {
opacity: 0;
- -moz-transform: translateY(-100%); }
+ -moz-transform: translateY(-100%);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0), 0px 40px 0px -30px rgba(255, 255, 255, 0), 30px 40px 0px -30px rgba(255, 255, 255, 0); }
- 10% {
- opacity: 1; }
+ 20% {
+ opacity: 0;
+ -moz-transform: translateY(-100%);
+ -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0), 0px 40px 0px -30px rgba(255, 255, 255, 0), 30px 40px 0px -30px rgba(255, 255, 255, 0); }
+
+ 25% {
+ opacity: 1;
+ -moz-transform: translateY(0px);
+ -moz-box-shadow: -50px 60px 0px -30px rgba(255, 255, 255, 0), 0px 60px 0px -30px rgba(255, 255, 255, 0), 50px 60px 0px -30px rgba(255, 255, 255, 0); }
+
+ 29% {
+ -moz-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); }
100% {
- -moz-transform: translateY(0px); } }
+ -moz-box-shadow: -100px 90px 120px -10px rgba(255, 255, 255, 0), 0px 90px 120px -10px rgba(255, 255, 255, 0), 100px 90px 120px -10px rgba(255, 255, 255, 0); } }
@-webkit-keyframes glide {
0% {
Please sign in to comment.
Something went wrong with that request. Please try again.