Browse Source

Merge pull request #920 from nikoloza/master

added 'Fade Left' and 'Fade Right' transition effects
pull/924/head
Jack Lukic 10 years ago
parent
commit
08fea3cbe5
1 changed files with 59 additions and 0 deletions
  1. 59
      src/modules/transition.less

59
src/modules/transition.less

@ -136,6 +136,20 @@
animation-name: fadeDownOut;
}
.ui.fade.left.transition.in {
animation-name: fadeLeft;
}
.ui.fade.left.transition.out {
animation-name: fadeLeftOut;
}
.ui.fade.right.transition.in {
animation-name: fadeRight;
}
.ui.fade.right.transition.out {
animation-name: fadeRightOut;
}
/*--------------
Scale
---------------*/
@ -392,6 +406,51 @@
}
}
/* Fade Left */
@keyframes fadeLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeLeftOut {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
/* Fade Right */
@keyframes fadeRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeRightOut {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
/*--------------
Scale
---------------*/

Loading…
Cancel
Save