Skip to content

Instantly share code, notes, and snippets.

@eanakashima

eanakashima/_animixins.scss

Created November 20, 2012 18:51
Show Gist options
  • Save eanakashima/4120112 to your computer and use it in GitHub Desktop.
Save eanakashima/4120112 to your computer and use it in GitHub Desktop.
Download ZIP
animation mixins
Raw
_animixins.scss
@mixin animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
}
// Fade-in / Fade-out
@-webkit-keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@mixin fade-in {
@include animated();
-webkit-animation-name: fade-in;
-moz-animation-name: fade-in;
animation-name: fade-in;
}
@-webkit-keyframes fade-out { 0% {opacity: 1;} 100% {opacity: 0;} }
@-moz-keyframes fade-out { 0% {opacity: 1;} 100% {opacity: 0;} }
@keyframes fade-out { 0% {opacity: 1;} 100% {opacity: 0;} }
@mixin fade-out {
@include animated();
-webkit-animation-name: fade-out;
-moz-animation-name: fade-out;
animation-name: fade-out;
}
// Fade-up / Fade-down
@-webkit-keyframes fade-in-up { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes fade-in-up { 0% { opacity: 0; -moz-transform: translateY(20px);} 100% { opacity: 1; -moz-transform: translateY(0); } }
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@mixin fade-in-up {
@include animated();
-webkit-animation-name: fade-in-up;
-moz-animation-name: fade-in-up;
animation-name: fade-in-up;
}
@-webkit-keyframes fade-out-down { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } }
@-moz-keyframes fade-out-down { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } }
@keyframes fade-out-down { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } }
@mixin fade-out-down {
@include animated();
-webkit-animation-name: fade-out-down;
-moz-animation-name: fade-out-down;
animation-name: fade-out-down;
}
// Fade-left
@-webkit-keyframes fade-in-left { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fade-in-left { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } }
@keyframes fade-in-left { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@mixin fade-in-left {
@include animated();
-webkit-animation-name: fade-in-left;
-moz-animation-name: fade-in-left;
animation-name: fade-in-left;
}
@-webkit-keyframes fade-out-left { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } }
@-moz-keyframes fade-out-left { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } }
@keyframes fade-out-left { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }
@mixin fade-out-left {
@include animated();
-webkit-animation-name: fade-out-left;
-moz-animation-name: fade-out-left;
animation-name: fade-out-left;
}
// Fade-right
@-webkit-keyframes fade-in-right { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fade-in-right { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } }
@keyframes fade-in-right { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@mixin fade-in-right {
@include animated();
-webkit-animation-name: fade-in-right;
-moz-animation-name: fade-in-right;
animation-name: fade-in-right;
}
@-webkit-keyframes fade-out-right { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } }
@-moz-keyframes fade-out-right { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } }
@keyframes fade-out-right { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } }
@mixin fade-out-right {
@include animated();
-webkit-animation-name: fade-out-right;
-moz-animation-name: fade-out-right;
animation-name: fade-out-right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment