We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

B2G OS

In-app navigation

Animations shown when you move deeper within the interface of a navigation, and then move out again.

Visualization

Code

/*------- Go Deeper -------*/
animation: currentToLeft 0.4s forwards;
@keyframes currentToLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

animation: rightToCurrent 0.4s forwards;
@keyframes rightToCurrent {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

/*------- Go Back -------*/
animation: leftToCurrent 0.4s forwards;
@keyframes leftToCurrent {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

animation: currentToRight 0.4s forwards;
@keyframes currentToRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}


Document Tags and Contributors

Contributors to this page: chrisdavidmills, Uemmra3, kscarfone
Last updated by: chrisdavidmills,