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.
42 lines
1.2 KiB
42 lines
1.2 KiB
9 years ago
|
/* ==========================================================================
|
||
|
|
Animations
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
/*
|
||
|
|
Wiggle animation
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
@include keyframes(wiggle) {
|
||
|
|
25%, 50%, 75%, 100% { @include transform-origin(top center); }
|
||
|
|
25% { @include transform(rotate(8deg)); }
|
||
|
|
50% { @include transform(rotate(-4deg)); }
|
||
|
|
75% { @include transform(rotate(2deg)); }
|
||
|
|
100% { @include transform(rotate(0deg)); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
Pop animation
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
@include keyframes(pop) {
|
||
|
|
50% { @include transform(scale(1.1)); }
|
||
|
|
100% { @include transform(scale(1)); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
Hang animation
|
||
|
|
========================================================================== */
|
||
|
|
|
||
|
|
@include keyframes(hang) {
|
||
|
|
50% { @include transform(translateY(-3px)); }
|
||
|
|
100% { @include transform(translateY(-6px)); }
|
||
|
|
}
|
||
|
|
.hang {
|
||
|
|
display: inline-block;
|
||
|
|
@include animation-name(hang);
|
||
|
|
@include animation-duration(0.5s);
|
||
|
|
@include animation-timing-function(linear);
|
||
|
|
@include animation-iteration-count(infinite);
|
||
|
|
@include animation-direction(alternate);
|
||
|
|
}
|