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.
88 lines
2.2 KiB
88 lines
2.2 KiB
12 years ago
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(flip) {
|
||
|
|
0% {
|
||
|
|
@include transform(perspective(400px) rotateY(0));
|
||
|
|
@include animation-timing-function(ease-out);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
@include transform(perspective(400px) translateZ(150px) rotateY(170deg));
|
||
|
|
@include animation-timing-function(ease-out);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
@include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
|
||
|
|
@include animation-timing-function(ease-in);
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
@include transform(perspective(400px) rotateY(360deg) scale(0.95));
|
||
|
|
@include animation-timing-function(ease-in);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
@include transform(perspective(400px) scale(1));
|
||
|
|
@include animation-timing-function(ease-in);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(flipInX) {
|
||
|
|
0% {
|
||
|
|
@include transform(perspective(400px) rotateX(90deg));
|
||
|
|
@include opacity(0);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
@include transform(perspective(400px) rotateX(-10deg));
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
@include transform(perspective(400px) rotateX(10deg));
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
@include transform(perspective(400px) rotateX(0deg));
|
||
|
|
@include opacity(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(flipOutX) {
|
||
|
|
0% {
|
||
|
|
@include transform(perspective(400px) rotateX(0deg));
|
||
|
|
@include opacity(1);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
@include transform(perspective(400px) rotateX(90deg));
|
||
|
|
@include opacity(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(flipInY) {
|
||
|
|
0% {
|
||
|
|
@include transform(perspective(400px) rotateY(90deg));
|
||
|
|
@include opacity(0);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
@include transform(perspective(400px) rotateY(-10deg));
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
@include transform(perspective(400px) rotateY(10deg));
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
@include transform(perspective(400px) rotateY(0deg));
|
||
|
|
@include opacity(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@include keyframes(flipOutY) {
|
||
|
|
0% {
|
||
|
|
@include transform(perspective(400px) rotateY(0deg));
|
||
|
|
@include opacity(1);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
@include transform(perspective(400px) rotateY(90deg));
|
||
|
|
@include opacity(0);
|
||
|
|
}
|
||
|
|
}
|