// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Fabric Animations


// Note that all animation classes should begin with the "ms-u" utility prefix.
// The original class names are deprecated and will be removed in a future release.

@import "Fabric.Animations";

// slideRightIn10
.ms-u-slideRightIn10 {
    @include ms-u-slideRightIn10;
}
@-webkit-keyframes slideRightIn10 {
    from { -webkit-transform:translate3d(-10px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideRightIn10 {
    from { transform:translate3d(-10px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideRightIn20
.ms-u-slideRightIn20 {
    @include ms-u-slideRightIn20;
}
@-webkit-keyframes slideRightIn20 {
    from { -webkit-transform:translate3d(-20px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideRightIn20 {
    from { transform:translate3d(-20px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideRightIn40
.ms-u-slideRightIn40 {
    @include ms-u-slideRightIn40;
}
@-webkit-keyframes slideRightIn40 {
    from { -webkit-transform:translate3d(-40px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideRightIn40 {
    from { transform:translate3d(-40px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideLeftIn10
.ms-u-slideLeftIn10 {
    @include ms-u-slideLeftIn10;
}
@-webkit-keyframes slideLeftIn10 {
    from { -webkit-transform:translate3d(10px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideLeftIn10 {
    from { transform:translate3d(10px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideLeftIn20
.ms-u-slideLeftIn20 {
    @include ms-u-slideLeftIn20;
}
@-webkit-keyframes slideLeftIn20 {
    from { -webkit-transform:translate3d(20px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideLeftIn20 {
    from { transform:translate3d(20px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideLeftIn40
.ms-u-slideLeftIn40 {
    @include ms-u-slideLeftIn40;
}
@-webkit-keyframes slideLeftIn40 {
    from { -webkit-transform:translate3d(40px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideLeftIn40 {
    from { transform:translate3d(40px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideRightIn400
.ms-u-slideRightIn400 {
    @include ms-u-slideRightIn400;
}
@-webkit-keyframes slideRightIn400 {
    from { -webkit-transform:translate3d(-400px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideRightIn400 {
    from { transform:translate3d(-400px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideLeftIn400
.ms-u-slideLeftIn400 {
    @include ms-u-slideLeftIn400;
}
@-webkit-keyframes slideLeft400 {
    from { -webkit-transform:translate3d(400px, 0px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideLeft400 {
    from { transform:translate3d(400px, 0px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideUpIn20
.ms-u-slideUpIn20 {
    @include ms-u-slideUpIn20;
}
@-webkit-keyframes slideUpIn20 {
    from { -webkit-transform:translate3d(0px, 20px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideUpIn20 {
    from { transform:translate3d(0px, 20px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideUpIn10
.ms-u-slideUpIn10 {
    @include ms-u-slideUpIn10;
}
@-webkit-keyframes slideUpIn10 {
    from { -webkit-transform:translate3d(0px, 10px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideUpIn10 {
    from { transform:translate3d(0px, 10px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideDownIn20
.ms-u-slideDownIn20 {
    @include ms-u-slideDownIn20;
}
@-webkit-keyframes slideDownIn20 {
    from { -webkit-transform:translate3d(0px, -20px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideDownIn20 {
    from { transform:translate3d(0px, -20px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideDownIn10
.ms-u-slideDownIn10 {
    @include ms-u-slideDownIn10;
}
@-webkit-keyframes slideDownIn10 {
    from { -webkit-transform:translate3d(0px, -10px, 0px); }
    to { -webkit-transform:translate3d(0px, 0px, 0px); }
}
@keyframes slideDownIn10 {
    from { transform:translate3d(0px, -10px, 0px); }
    to { transform:translate3d(0px, 0px, 0px); }
}

// slideRightOut40
.ms-u-slideRightOut40 {
    @include ms-u-slideRightOut40;
}
@-webkit-keyframes slideRightOut40 {
    from { -webkit-transform:translate3d(0px, 0px, 0px); }
    to { -webkit-transform:translate3d(40px, 0px, 0px); }
}
@keyframes slideRightOut40 {
    from { transform:translate3d(0px, 0px, 0px); }
    to { transform:translate3d(40px, 0px, 0px); }
}

// slideLeftOut40
.ms-u-slideLeftOut40 {
    @include ms-u-slideLeftOut40;
}
@-webkit-keyframes slideLeftOut40 {
    from { -webkit-transform:translate3d(0, 0px, 0px); }
    to { -webkit-transform:translate3d(-40px, 0px, 0px); }
}
@keyframes slideLeftOut40 {
    from { transform:translate3d(0, 0px, 0px); }
    to { transform:translate3d(-40px, 0px, 0px); }
}

// slideRightOut400
.ms-u-slideRightOut400 {
    @include ms-u-slideRightOut400;
}
@-webkit-keyframes slideRightOut400 {
    from { -webkit-transform:translate3d(0, 0px, 0px); }
    to { -webkit-transform:translate3d(400px, 0px, 0px); }
}
@keyframes slideRightOut400 {
    from { transform:translate3d(0, 0px, 0px); }
    to { transform:translate3d(400px, 0px, 0px); }
}

// slideLeftOut400
.ms-u-slideLeftOut400 {
    @include ms-u-slideLeftOut400;
}
@-webkit-keyframes slideLeftOut400 {
    from { -webkit-transform:translate3d(0, 0px, 0px); }
    to { -webkit-transform:translate3d(-400px, 0px, 0px); }
}
@keyframes slideLeftOut400 {
    from { transform:translate3d(0, 0px, 0px); }
    to { transform:translate3d(-400px, 0px, 0px); }
}

// slideUpOut20
.ms-u-slideUpOut20 {
    @include ms-u-slideUpOut20;
}
@-webkit-keyframes slideUpOut20 {
    from { -webkit-transform:translate3d(0px, 0, 0px); }
    to { -webkit-transform:translate3d(0px, -20px, 0px); }
}
@keyframes slideUpOut20 {
    from { transform:translate3d(0px, 0, 0px); }
    to { transform:translate3d(0px, -20px, 0px); }
}

// slideUpOut10
.ms-u-slideUpOut10 {
    @include ms-u-slideUpOut10;
}
@-webkit-keyframes slideUpOut10 {
    from { -webkit-transform:translate3d(0px, 0, 0px); }
    to { -webkit-transform:translate3d(0px, -10px, 0px); }
}
@keyframes slideUpOut10 {
    from { transform:translate3d(0px, 0, 0px); }
    to { transform:translate3d(0px, -10px, 0px); }
}

// slideDownOut20
.ms-u-slideDownOut20 {
    @include ms-u-slideDownOut20;
}
@-webkit-keyframes slideDownOut20 {
    from { -webkit-transform:translate3d(0px, 0, 0px); }
    to { -webkit-transform:translate3d(0px, 20px, 0px); }
}
@keyframes slideDownOut20 {
    from { transform:translate3d(0px, 0, 0px); }
    to { transform:translate3d(0px, 20px, 0px); }
}

// slideDownOut10
.ms-u-slideDownOut10 {
    @include ms-u-slideDownOut10;
}
@-webkit-keyframes slideDownOut10 {
    from { -webkit-transform:translate3d(0px, 0, 0px); }
    to { -webkit-transform:translate3d(0px, 10px, 0px); }
}
@keyframes slideDownOut10 {
    from { transform:translate3d(0px, 0, 0px); }
    to { transform:translate3d(0px, 10px, 0px); }
}

// scaleUpIn100
.ms-u-scaleUpIn100 {
    @include ms-u-scaleUpIn100;
}
@-webkit-keyframes scaleUp100 {
    from { -webkit-transform:scale3d(.98, .98, 1); }
    to { -webkit-transform:scale3d(1, 1, 1); }
}
@keyframes scaleUp100 {
    from { transform:scale3d(.98, .98, 1); }
    to { transform:scale3d(1, 1, 1); }
}

// scaleDownIn100
.ms-u-scaleDownIn100 {
    @include ms-u-scaleDownIn100;
}
@-webkit-keyframes scaleDown100 {
    from { -webkit-transform:scale3d(1.03, 1.03, 1); }
    to { -webkit-transform:scale3d(1, 1, 1); }
}
@keyframes scaleDown100 {
    from { transform:scale3d(1.03, 1.03, 1); }
    to { transform:scale3d(1, 1, 1); }
}

// scaleUpOut103
.ms-u-scaleUpOut103 {
    @include ms-u-scaleUpOut103;
}
@-webkit-keyframes scaleUp103 {
    from { -webkit-transform:scale3d(1, 1, 1); }
    to { -webkit-transform:scale3d(1.03, 1.03, 1); }
}
@keyframes scaleUp103 {
    from { transform:scale3d(1, 1, 1); }
    to { transform:scale3d(1.03, 1.03, 1); }
}

// scaleDownOut98
.ms-u-scaleDownOut98 {
    @include ms-u-scaleDownOut98;
}
@-webkit-keyframes scaleDown98 {
    from { -webkit-transform:scale3d(1, 1, 1); }
    to { -webkit-transform:scale3d(0.98, 0.98, 1); }
}
@keyframes scaleDown98 {
    from { transform:scale3d(1, 1, 1); }
    to { transform:scale3d(0.98, 0.98, 1); }
}

// fadeIn
.ms-u-fadeIn400 {
    @include ms-u-fadeIn400;
}
.ms-u-fadeIn100 {
    @include ms-u-fadeIn100;
}
.ms-u-fadeIn200 {
    @include ms-u-fadeIn200;
}
.ms-u-fadeIn500 {
    @include ms-u-fadeIn500;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-animation-timing-function: $ms-ease2; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; animation-timing-function: $ms-ease2; }
    to { opacity: 1; }
}

// fadeOut
.ms-u-fadeOut400 {
    @include ms-u-fadeOut400;
}
.ms-u-fadeOut100 {
    @include ms-u-fadeOut100;
}
.ms-u-fadeOut200 {
    @include ms-u-fadeOut200;
}
.ms-u-fadeOut500 {
    @include ms-u-fadeOut500;
}
@-webkit-keyframes fadeOut {
    from { opacity: 1; -webkit-animation-timing-function: $ms-ease2; }
    to { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; animation-timing-function: $ms-ease2; }
    to { opacity: 0; }
}

// rotate90deg
.ms-u-rotate90deg {
    @include ms-u-rotate90deg;
}
@-webkit-keyframes rotate90 {
    from { -webkit-transform:rotateZ(0deg); }
    to { -webkit-transform:rotateZ(90deg); }
}
@keyframes rotate90 {
    from { transform:rotateZ(0deg); }
    to { transform:rotateZ(90deg); }
}

// rotateN90deg
.ms-u-rotateN90deg {
    @include ms-u-rotateN90deg;
}
@-webkit-keyframes rotateN90 {
    from { -webkit-transform:rotateZ(90deg); }
    to { -webkit-transform:rotateZ(0deg); }
}
@keyframes rotateN90 {
    from { transform:rotateZ(90deg); }
    to { transform:rotateZ(0deg); }
}

// expandCollapse400
.ms-u-expandCollapse400 {
    @include ms-u-expandCollapse400;
}

// expandCollapse200
.ms-u-expandCollapse200 {
    @include ms-u-expandCollapse200;
}

// expandCollapse100
.ms-u-expandCollapse100 {
    @include ms-u-expandCollapse100;
}

// delay100
.ms-u-delay100 {
    @include ms-u-delay100;
}

// delay200
.ms-u-delay200 {
    @include ms-u-delay200;
}