Skip to content

Commit

Permalink
Added more animation ideas
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicholas Pettit authored and Nicholas Pettit committed Oct 30, 2011
1 parent c2a19fe commit 6cbf267
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 40 deletions.
Binary file modified .sass-cache/1c4ace758257563d9070eeeb618e53419fb49e35/glide.scssc
View file
Binary file not shown.
76 changes: 54 additions & 22 deletions sass/glide.scss
View file
Expand Up @@ -16,16 +16,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript? - Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU - Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0); - 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. - Seems to be broken in Safari.
Animation Ideas: Animation Ideas:
- Flashbulb? - Flashbulb
- Bounce - 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 - Earthquake
- Wipes - Wipes?
- Barbershop
*******************************************************************************/ *******************************************************************************/
Expand Down Expand Up @@ -734,33 +743,33 @@ Animation Ideas:
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY($start); -webkit-transform: translateY($start);
-webkit-box-shadow:-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), 0px 40px 0px -30px rgba(255,255,255,0),
30px 40px 0px -30px rgba(255,255,255,0); 30px 40px 0px -30px rgba(255,255,255,0);
} }
20% { 20% {
opacity: 0; opacity: 0;
-webkit-transform: translateY($start); -webkit-transform: translateY($start);
-webkit-box-shadow:-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), 0px 40px 0px -30px rgba(255,255,255,0),
30px 40px 0px -30px rgba(255,255,255,0); 30px 40px 0px -30px rgba(255,255,255,0);
} }
25% { 25% {
opacity: 1; opacity: 1;
-webkit-transform: translateY($end); -webkit-transform: translateY($end);
-webkit-box-shadow:-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), 0px 60px 0px -30px rgba(255,255,255,0),
50px 60px 0px -30px rgba(255,255,255,0); 50px 60px 0px -30px rgba(255,255,255,0);
} }
29% { 29% {
-webkit-box-shadow:-70px 80px 70px -30px rgba(255,255,255,.5), -webkit-box-shadow: -70px 80px 70px -30px rgba(255,255,255,.5),
0px 80px 70px -30px rgba(255,255,255,.7), 0px 80px 70px -30px rgba(255,255,255,.7),
70px 80px 70px -30px rgba(255,255,255,.6); 70px 80px 70px -30px rgba(255,255,255,.6);
} }
100% { 100% {
-webkit-box-shadow:-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), 0px 90px 120px -10px rgba(255,255,255,.0),
100px 90px 120px -10px rgba(255,255,255,.0); 100px 90px 120px -10px rgba(255,255,255,.0);


} }
} }
Expand All @@ -769,12 +778,34 @@ Animation Ideas:
0% { 0% {
opacity: 0; opacity: 0;
-moz-transform: translateY($start); -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; 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% { 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);

} }
} }


Expand Down Expand Up @@ -824,6 +855,7 @@ Animation Ideas:


} }



@include fade_keyframes; @include fade_keyframes;
@include spin_keyframes; @include spin_keyframes;
@include pulse_keyframes; @include pulse_keyframes;
Expand Down
38 changes: 29 additions & 9 deletions stylesheets/glide.css
View file
Expand Up @@ -14,16 +14,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript? - Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU - Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0); - 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. - Seems to be broken in Safari.
Animation Ideas: Animation Ideas:
- Flashbulb? - Flashbulb
- Bounce - 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 - Earthquake
- Wipes - Wipes?
- Barbershop
*******************************************************************************/ *******************************************************************************/
Expand Down Expand Up @@ -510,13 +519,24 @@ Animation Ideas:
@-moz-keyframes stomp { @-moz-keyframes stomp {
0% { 0% {
opacity: 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% { 20% {
opacity: 1; } 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% { 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 { @-webkit-keyframes glide {
0% { 0% {
Expand Down
38 changes: 29 additions & 9 deletions stylesheets/screen.css
View file
Expand Up @@ -14,16 +14,25 @@ To do's and notes:
- Can the user be able to add/remove animations via JavaScript? - Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU - Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0); - 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. - Seems to be broken in Safari.
Animation Ideas: Animation Ideas:
- Flashbulb? - Flashbulb
- Bounce - 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 - Earthquake
- Wipes - Wipes?
- Barbershop
*******************************************************************************/ *******************************************************************************/
Expand Down Expand Up @@ -510,13 +519,24 @@ Animation Ideas:
@-moz-keyframes stomp { @-moz-keyframes stomp {
0% { 0% {
opacity: 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% { 20% {
opacity: 1; } 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% { 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 { @-webkit-keyframes glide {
0% { 0% {
Expand Down

0 comments on commit 6cbf267

Please sign in to comment.