Skip to content

Commit

Permalink
Add Plop animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@zvuc
zvuc committed Mar 11, 2016
1 parent 012ebf3 commit 0c587df
Show file tree
Hide file tree
Showing 6 changed files with 263 additions and 2 deletions.
179 changes: 179 additions & 0 deletions build/tuesday.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1143,3 +1143,182 @@
-webkit-animation-name: tdDropInRight;
animation-name: tdDropInRight;
}
/* Plop Entrances */
@-webkit-keyframes tdPlopIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
10% {
opacity: 1;
-webkit-transform: scale(0.7, 1.3);
transform: scale(0.7, 1.3);
}
70% {
-webkit-transform: scale(1.1, 0.95);
transform: scale(1.1, 0.95);
}
90% {
-webkit-transform: scale(0.97, 1.05);
transform: scale(0.97, 1.05);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes tdPlopIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
10% {
opacity: 1;
-webkit-transform: scale(0.7, 1.3);
transform: scale(0.7, 1.3);
}
70% {
-webkit-transform: scale(1.1, 0.95);
transform: scale(1.1, 0.95);
}
90% {
-webkit-transform: scale(0.97, 1.05);
transform: scale(0.97, 1.05);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes tdPlopInDown {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.8);
transform: scale(0.9, 0.8);
-webkit-transform-origin: center top;
transform-origin: center top;
}
10% {
opacity: 1;
-webkit-transform: scale(0.8, 1.3);
transform: scale(0.8, 1.3);
-webkit-transform-origin: center top;
transform-origin: center top;
}
70% {
-webkit-transform: scale(1, 0.95);
transform: scale(1, 0.95);
-webkit-transform-origin: center top;
transform-origin: center top;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
}
@keyframes tdPlopInDown {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.8);
transform: scale(0.9, 0.8);
-webkit-transform-origin: center top;
transform-origin: center top;
}
10% {
opacity: 1;
-webkit-transform: scale(0.8, 1.3);
transform: scale(0.8, 1.3);
-webkit-transform-origin: center top;
transform-origin: center top;
}
70% {
-webkit-transform: scale(1, 0.95);
transform: scale(1, 0.95);
-webkit-transform-origin: center top;
transform-origin: center top;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
}
@-webkit-keyframes tdPlopInUp {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.8);
transform: scale(0.9, 0.8);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
10% {
opacity: 1;
-webkit-transform: scale(0.8, 1.3);
transform: scale(0.8, 1.3);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
70% {
-webkit-transform: scale(1, 0.95);
transform: scale(1, 0.95);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
}
@keyframes tdPlopInUp {
0% {
opacity: 0;
-webkit-transform: scale(0.9, 0.8);
transform: scale(0.9, 0.8);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
10% {
opacity: 1;
-webkit-transform: scale(0.8, 1.3);
transform: scale(0.8, 1.3);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
70% {
-webkit-transform: scale(1, 0.95);
transform: scale(1, 0.95);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
}
.tdPlopIn {
-webkit-animation-name: tdPlopIn;
animation-name: tdPlopIn;
}
.tdPlopInDown {
-webkit-animation-name: tdPlopInDown;
animation-name: tdPlopInDown;
}
.tdPlopInUp {
-webkit-animation-name: tdPlopInUp;
animation-name: tdPlopInUp;
}
2 changes: 1 addition & 1 deletion build/tuesday.min.css
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ <h2>Entrances</h2>
<option value="tdDropInLeft">tdDropInLeft</option>
<option value="tdDropInRight">tdDropInRight</option>
</optgroup>
<optgroup label="PlopIn">
<option value="tdPlopIn">tdPlopIn</option>
<option value="tdPlopInDown">tdPlopInDown</option>
<option value="tdPlopInUp">tdPlopInUp</option>
</optgroup>
<optgroup label="HingeFlip">
<option value="tdHingeFlipIn" selected>tdHingeFlipIn</option>
</optgroup>
Expand Down
76 changes: 76 additions & 0 deletions modules/plop.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/* Plop Entrances */
@keyframes tdPlopIn {
0% {
opacity: 0;
transform: scale(0.9,0.9);
}
10% {
opacity: 1;
transform: scale(0.7,1.3);
}
70% {
transform: scale(1.1,0.95);
}
90% {
transform: scale(0.97,1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes tdPlopInDown {
0% {
opacity: 0;
transform: scale(0.9,0.8);
transform-origin: center top;
}
10% {
opacity: 1;
transform: scale(0.8,1.3);
transform-origin: center top;
}
70% {
transform: scale(1,0.95);
transform-origin: center top;
}
100% {
opacity: 1;
transform: scale(1);
transform-origin: center top;
}
}

@keyframes tdPlopInUp {
0% {
opacity: 0;
transform: scale(0.9,0.8);
transform-origin: center bottom;
}
10% {
opacity: 1;
transform: scale(0.8,1.3);
transform-origin: center bottom;
}
70% {
transform: scale(1,0.95);
transform-origin: center bottom;
}
100% {
opacity: 1;
transform: scale(1);
transform-origin: center bottom;
}
}

.tdPlopIn {
animation-name: tdPlopIn;
}
.tdPlopInDown {
animation-name: tdPlopInDown;
}
.tdPlopInUp {
animation-name: tdPlopInUp;
}

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "tuesday",
"id": "tuesday",
"codename": "tuesday",
"version": "1.0.0",
"version": "1.1.0",
"description": "A quirky CSS Animation Library by Shakr.",
"keywords": [
"tuesday",
Expand Down
1 change: 1 addition & 0 deletions tuesday.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@
@import 'modules/swing.less';
@import 'modules/hinge-flip.less';
@import 'modules/drop.less';
@import 'modules/plop.less';

0 comments on commit 0c587df

Please sign in to comment.