.animated { -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInPartial { 0% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(-280px); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideInPartial { 0% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(-280px); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @-webkit-keyframes slideOutPartial { 0% { -webkit-transform: translateX(-280px); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideOutParial { 0% { transform: translateX(-280px); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @-webkit-keyframes slideInFull { 0% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(-100%); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideInFull { 0% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(-100%); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @-webkit-keyframes slideOutFull { 0% { -webkit-transform: translateX(-100%); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideOutFull { 0% { transform: translateX(-100%); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @-webkit-keyframes slideButtonIn { 0% { -webkit-transform: translateX(278px); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideButtonIn { 0% { transform: translateX(278px); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @-webkit-keyframes slideButtonOut { 0% { -webkit-transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { -webkit-transform: translateX(280px); -webkit-transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } } @keyframes slideButtonOut { 0% { transform: translateX(0); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } 100% { transform: translateX(280px); transition-timing-function: cubic-bezier(0, 0.59, 0.54, 1); } }