https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
87 lines
2.0 KiB
12 years ago
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeIn) {
|
||
|
|
0% {
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInUp) {
|
||
|
|
0% {
|
||
|
|
@include translateY(20px);
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
@include translateY(0);
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInDown) {
|
||
|
|
0% {
|
||
|
|
@include translateY(-20px);
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
@include translateY(0);
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInRight) {
|
||
|
|
0% {
|
||
|
|
@include translateX(20px);
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
@include translateX(0);
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInLeft) {
|
||
|
|
0% {
|
||
|
|
@include translateX(-20px);
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
@include translateX(0);
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInUpBig) {
|
||
|
|
0% {
|
||
|
|
@include translateY(2000px);
|
||
|
|
opacity: 0; }
|
||
|
|
100% {
|
||
|
|
@include translateY(0);
|
||
|
|
opacity: 1; } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInDownBig) {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
@include translateY(-2000px); }
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
@include translateY(0); } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInRightBig) {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
@include translateX(2000px); }
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
@include translateX(0); } }
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(fadeInLeftBig) {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
@include translateX(-2000px); }
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
@include translateX(0); } }
|