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

Opening and closing apps

Animations used to mark the transition of apps opening and closing.

Opening apps

Visualization

Code

/* Scale icons */
animation: openAppIcons 0.3s forwards ease;
@keyframes openAppIcons {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.8); }
}

/* Show app */
animation: openApp 0.3s forwards ease;
@keyframes openApp {
  0%   { transform: scale(0.1); opacity: 0; }
  100% { transform: scale(1.0); opacity: 1; }
}

Closing apps

Visualization

Code

/* Scale icons */
animation: closeAppIcons 0.3s forwards ease;
@keyframes closeAppIcons {
  0%   { transform: scale(1.8); }
  100% { transform: scale(1.0); }
}

/* Hide app */
animation: closeApp 0.3s forwards ease;
@keyframes closeApp {
  0%   { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.1); opacity: 0; }
}

Document Tags and Contributors

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