Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-18 01:50:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

Updating home page with rubberBand animation.

Browse source
This commit is contained in:
Matt Willis 2014-02-14 17:07:50 -05:00
parent 83287b83df
commit ec12cc1465
3 changed files with 68 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
animate.css vendored
View file

@ -1,6 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
Animate.css - http://daneden.me/animate Animate.css - http://daneden.me/animate
Licensed under the MIT license Licensed under the MIT license
@ -137,6 +136,70 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
animation-name: pulse; animation-name: pulse;
} }
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
-ms-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
-ms-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
-ms-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake { @-webkit-keyframes shake {
0%, 100% { 0%, 100% {
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
@ -417,6 +480,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
} }
100% { 100% {
opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
transform: scale(1); transform: scale(1);
} }
@ -444,6 +508,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
} }
100% { 100% {
opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);

2
animate.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
index.html
View file

@ -29,6 +29,7 @@
<option value="bounce">bounce</option> <option value="bounce">bounce</option>
<option value="flash">flash</option> <option value="flash">flash</option>
<option value="pulse">pulse</option> <option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="shake">shake</option> <option value="shake">shake</option>
<option value="swing">swing</option> <option value="swing">swing</option>
<option value="tada">tada</option> <option value="tada">tada</option>