Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Studio: updates keyframes/animations syntax for all animations

Browse Source
This commit is contained in:
Brian Talbot
2013-07-09 10:39:11 -04:00
committed by David Baumgold
parent 40585b2bbb
commit b42074716b
1 changed files with 56 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
cms/static/sass/assets/_anims.scss
View File

@@ -2,35 +2,51 @@
// ====================
// rotate clockwise
@mixin rotateClockwise {
@include keyframes(rotateCW) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(180deg));
}
100% {
@include transform(rotate(360deg));
}
}
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
// ====================
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(rotateClockwise);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
// canned rotate clockwise animation - use if you want out of the box/non-customized anim
.anim-rotateCW {
@include animation(rotateCW 1.0s linear inifinte);
}
// rotate counter-clockwise
@include keyframes(rotateCCW) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(-180deg));
}
100% {
@include transform(rotate(-360deg));
}
}
// canned rotate counter-clockwise animation - use if you want out of the box/non-customized anim
.anim-rotateCCW {
@include animation(rotateCCW 1.0s linear inifinte);
}
// ====================
// notifications slide up
@mixin notificationsSlideUp {
@include keyframes(notificationSlideUp) {
0% {
@include transform(translateY(0));
}
@@ -44,25 +60,10 @@
}
}
@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@keyframes notificationsSlideUp { @include notificationsSlideUp();}
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideUp);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// notifications slide down
@mixin notificationsSlideDown {
@include keyframes(notificationSlideDown) {
0% {
@include transform(translateY(-($notification-height*0.99)));
}
@@ -76,71 +77,34 @@
}
}
@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@keyframes notificationsSlideDown { @include notificationsSlideDown();}
// ====================
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideDown);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
// bounce in
@include keyframes(bounceIn) {
0% {
opacity: 0.0;
@include transform(scale(0.3));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
}
// canned bounce in animation - use if you want out of the box/non-customized anim
.anim-bounceIn {
@include animation(bounceIn 0.5s ease-in-out 1);
}
// ====================
// bounce in
@mixin bounceIn {
0% {
opacity: 0.0;
@include transform(scale(0.3));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
}
@-moz-keyframes bounceIn { @include bounceIn(); }
@-webkit-keyframes bounceIn { @include bounceIn(); }
@-o-keyframes bounceIn { @include bounceIn(); }
@keyframes bounceIn { @include bounceIn();}
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceIn);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// bounce in
@mixin bounceOut {
0% {
opacity: 0.0;
@include transform(scale(0.3));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
// bounce out
@include keyframes(bounceOut) {
0% {
@include transform(scale(1));
}
@@ -156,16 +120,7 @@
}
}
@-moz-keyframes bounceOut { @include bounceOut(); }
@-webkit-keyframes bounceOut { @include bounceOut(); }
@-o-keyframes bounceOut { @include bounceOut(); }
@keyframes bounceOut { @include bounceOut();}
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceOut);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
// canned bounce in animation - use if you want out of the box/non-customized anim
.anim-bounceOut {
@include animation(bounceOut 0.5s ease-in-out 1);
}