.bottom-to-top { transform-origin: center top; -webkit-transform-origin: center top; transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.bottom-to-top.off { transform: translateY(100px); -webkit-transform: translateY(100px); opacity: 0; -webkit-opacity: 0; }
.top-to-bottom { transform-origin: center top; -webkit-transform-origin: center top; transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.top-to-bottom.off { transform: translateY(-300px); -webkit-transform: translateY(-300px); opacity: 0; -webkit-opacity: 0; }
.left-to-right { transform-origin: center center; -webkit-transform-origin: center center; transform: translateX(0px); -webkit-transform: translateX(0px); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.left-to-right.off { transform: translateX(-200px); -webkit-transform: translateX(-200px); opacity: 0; -webkit-opacity: 0; }
.right-to-left { transform-origin: center center; -webkit-transform-origin: center center; transform: translateX(0px); -webkit-transform: translateX(0px); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.right-to-left.off { transform: translateX(200px); -webkit-transform: translateX(200px); opacity: 0; -webkit-opacity: 0; }
.scale-up { transform-origin: center center; -webkit-transform-origin: center center; transform: scale(1, 1); -webkit-transform: scale(1, 1); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.scale-up.off { transform: scale(0.3, 0.3); -webkit-transform: scale(0.3, 0.3); opacity: 0; -webkit-opacity: 0; }
.scale-down { transform-origin: center center; -webkit-transform-origin: center center; transform: scale(1, 1); -webkit-transform: scale(1, 1); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.scale-down.off { transform: scale(1.8, 1.8); -webkit-transform: scale(1.8, 1.8); opacity: 0; -webkit-opacity: 0; }
.rotate-cw { transform-origin: center center; -webkit-transform-origin: center center; transform: rotate(0deg); -webkit-transform: rotate(0deg); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.rotate-cw.off { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); opacity: 0; -webkit-opacity: 0; }
.rotate-ccw { transform-origin: center center; -webkit-transform-origin: center center; transform: rotate(0deg); -webkit-transform: rotate(0deg); opacity: 1; -webkit-opacity: 1; transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.rotate-ccw.off { transform: rotate(90deg); -webkit-transform: rotate(90deg); opacity: 0; -webkit-opacity: 0; }
.fade-in { opacity: 1; -webkit-opacity: 1; transition: all 5s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 5s cubic-bezier(0.1, 0.9, 0.6, 1); }
.fade-in.off { opacity: 0; -webkit-opacity: 0; transition: all 0.3s cubic-bezier(0.1, 0.9, 0.6, 1); -webkit-transition: all 0.3s cubic-bezier(0.1, 0.9, 0.6, 1); }