/*————————————
Transitions
————————————*/ /*.g-transition {
&-0_2 { transition: .2s ease-out; } &-0_3 { transition: .3s ease-out; } &-0_6 { transition: .6s ease-out; &-ease { transition: .6s ease; } }
}
- class*=“g-color-”][class*=“–hover”
-
{
transition: color .2s ease-out;
}
- class*=“g-bg-”][class*=“–hover”
-
{
transition: background-color .3s ease-out;
}
- class*=“g-color-”][class*=“g-bg-”][class*=“–hover”
-
{
transition: .3s ease-out;
}*/
- class*=“g-transition”
-
{
transition-property: all; transition-timing-function: ease; transition-delay: 0s; &::before, &::after, path, polygon { transition-property: all; transition-timing-function: ease; transition-delay: 0s; }
}
.g-transition-0_2 {
transition-duration: .2s; &::before, &::after, path, polygon { transition-duration: .2s; }
}
.g-transition-0_3 {
transition-duration: .3s; &::before, &::after, path, polygon { transition-duration: .3s; }
}
.g-transition-0_5 {
transition-duration: .5s; &::before, &::after, path, polygon { transition-duration: .5s; }
}
.g-transition-0_6 {
transition-duration: .6s; &::before, &::after, path, polygon { transition-duration: .6s; }
}
.g-transition-delay-0_11 {
transition-delay: .11s; &::before, &::after, path, polygon { transition-delay: .11s; }
}
.g-transition-delay-0_2 {
transition-delay: .2s; &::before, &::after, path, polygon { transition-delay: .2s; }
}
.g-transition-delay-0_45 {
transition-delay: .45s; &::before, &::after, path, polygon { transition-delay: .45s; }
}
// // Transition Timing Function // .g-transition–ease { // transition-timing-function: ease; // } .g-transition–ease-out {
transition-timing-function: ease-out; &::before, &::after, path, polygon { transition-timing-function: ease-out; }
}
.g-transition–ease-in {
transition-timing-function: ease-in; &::before, &::after, path, polygon { transition-timing-function: ease-in; }
}
.g-transition–ease-in-out {
transition-timing-function: ease-in-out; &::before, &::after, path, polygon { transition-timing-function: ease-in-out; }
}
.g-transition–linear {
transition-timing-function: linear; &::before, &::after, path, polygon { transition-timing-function: linear; }
}