Skip to content

Instantly share code, notes, and snippets.

@spigotdesign
Created June 10, 2014 17:24
Show Gist options
  • Save spigotdesign/e0aeece1309370dc68c8 to your computer and use it in GitHub Desktop.
Save spigotdesign/e0aeece1309370dc68c8 to your computer and use it in GitHub Desktop.
.flood .service:nth-of-type(1) {
#redSwatch {
@include animation-name(red-swatch-go);
@extend .animation-settings;
@include transform-origin(32%, 78%);
}
&:hover #redSwatch {
@include animation-name(red-swatch-off);
}
#orangeSwatch {
@include animation-name(orange-swatch-go);
@extend .animation-settings;
@include transform-origin(30%, 78%);
}
&:hover #orangeSwatch {
@include animation-name(orange-swatch-off);
}
#yellowSwatch {
@include animation-name(yellow-swatch-go);
@extend .animation-settings;
@include transform-origin(26%, 78%);
}
&:hover #yellowSwatch {
@include animation-name(yellow-swatch-off);
}
#greenSwatch {
@include animation-name(green-swatch-go);
@extend .animation-settings;
@include transform-origin(28%, 78%);
}
&:hover #greenSwatch {
@include animation-name(green-swatch-off);
}
}
// Animations
@include keyframes(red-swatch-go) {
from { @include transform(rotate(0deg)); }
to { @include transform(rotate(51deg)); }
}
@include keyframes(red-swatch-off) {
from { @include transform(rotate(51deg)); }
to { @include transform(rotate(0deg)); }
}
@include keyframes(orange-swatch-go) {
from { @include transform(rotate(0deg)); }
to { @include transform(rotate(40deg)); }
}
@include keyframes(orange-swatch-off) {
from { @include transform(rotate(40deg)); }
to { @include transform(rotate(0deg)); }
}
@include keyframes(yellow-swatch-go) {
from { @include transform(rotate(0deg)); }
to { @include transform(rotate(25deg)); }
}
@include keyframes(yellow-swatch-off) {
from { @include transform(rotate(25deg)); }
to { @include transform(rotate(0deg)); }
}
@include keyframes(green-swatch-go) {
from { @include transform(rotate(0deg)); }
to { @include transform(rotate(13deg)); }
}
@include keyframes(green-swatch-off) {
from { @include transform(rotate(13deg)); }
to { @include transform(rotate(0deg)); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment