.effeckt-button { position: relative; font-family: inherit; cursor: pointer; -webkit-appearance: none; -webkit-font-smoothing: antialiased; } .effeckt-button[data-loading] { cursor: default; } .effeckt-button .spinner { position: absolute; width: 32px; height: 32px; top: 50%; margin-top: -16px; opacity: 0; background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MkI2RUQwRTdGOUUxMUUyQTFBODhFMEFDQUU0RUM3OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2MkI2RUQwRjdGOUUxMUUyQTFBODhFMEFDQUU0RUM3OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYyQjZFRDBDN0Y5RTExRTJBMUE4OEUwQUNBRTRFQzc5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYyQjZFRDBEN0Y5RTExRTJBMUE4OEUwQUNBRTRFQzc5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OoD8dAAAEMNJREFUeNqsXFvM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 ); background-size: 32px auto; } .effeckt-button[data-loading] .spinner { -webkit-animation: spinner 1s infinite linear; -o-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 50% { -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .effeckt-button, .effeckt-button .spinner, .effeckt-button .label { -webkit-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; -o-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; } .effeckt-button.zoom-in, .effeckt-button.zoom-in .spinner, .effeckt-button.zoom-in .label, .effeckt-button.zoom-out, .effeckt-button.zoom-out .spinner, .effeckt-button.zoom-out .label { -webkit-transition: 500ms ease all; -o-transition: 500ms ease all; transition: 500ms ease all; } .effeckt-button.expand-right .spinner { right: 16px; } .effeckt-button.expand-right[data-loading] { padding-right: 64px; } .effeckt-button.expand-right[data-loading] .spinner { opacity: 1; } .effeckt-button.expand-left .spinner { left: 16px; } .effeckt-button.expand-left[data-loading] { padding-left: 64px; } .effeckt-button.expand-left[data-loading] .spinner { opacity: 1; } .effeckt-button.expand-up { overflow: hidden; } .effeckt-button.expand-up .spinner { top: 32px; left: 50%; margin-left: -16px; } .effeckt-button.expand-up[data-loading] { padding-top: 64px; } .effeckt-button.expand-up[data-loading] .spinner { opacity: 1; top: 16px; margin-top: 0; } .effeckt-button.expand-down { overflow: hidden; } .effeckt-button.expand-down .spinner { left: 50%; top: 100%; margin-left: -16px; margin-top: -48px; } .effeckt-button.expand-down[data-loading] { padding-bottom: 64px; } .effeckt-button.expand-down[data-loading] .spinner { opacity: 1; } .effeckt-button.slide-left { overflow: hidden; } .effeckt-button.slide-left .label { position: relative; } .effeckt-button.slide-left .spinner { left: 100%; margin-left: -16px; } .effeckt-button.slide-left[data-loading] .label { opacity: 0; left: -100%; } .effeckt-button.slide-left[data-loading] .spinner { opacity: 1; left: 50%; } .effeckt-button.slide-right { overflow: hidden; } .effeckt-button.slide-right .label { position: relative; } .effeckt-button.slide-right .spinner { right: 100%; margin-left: -16px; } .effeckt-button.slide-right[data-loading] .label { opacity: 0; left: 100%; } .effeckt-button.slide-right[data-loading] .spinner { opacity: 1; left: 50%; } .effeckt-button.slide-up { overflow: hidden; } .effeckt-button.slide-up .label { position: relative; } .effeckt-button.slide-up .spinner { left: 50%; margin-left: -16px; margin-top: 1em; } .effeckt-button.slide-up[data-loading] .label { opacity: 0; top: -1em; } .effeckt-button.slide-up[data-loading] .spinner { opacity: 1; margin-top: -16px; } .effeckt-button.slide-down { overflow: hidden; } .effeckt-button.slide-down .label { position: relative; } .effeckt-button.slide-down .spinner { left: 50%; margin-left: -16px; margin-top: -32px; } .effeckt-button.slide-down[data-loading] .label { opacity: 0; top: 1em; } .effeckt-button.slide-down[data-loading] .spinner { opacity: 1; margin-top: -16px; } .effeckt-button.zoom-out { overflow: hidden; } .effeckt-button.zoom-out .spinner { left: 50%; margin-left: -16px; -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); } .effeckt-button.zoom-out .label { position: relative; display: inline-block; } .effeckt-button.zoom-out[data-loading] .label { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .effeckt-button.zoom-out[data-loading] .spinner { opacity: 1; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-button.zoom-in { overflow: hidden; } .effeckt-button.zoom-in .spinner { left: 50%; margin-left: -16px; -webkit-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } .effeckt-button.zoom-in .label { position: relative; display: inline-block; } .effeckt-button.zoom-in[data-loading] .label { opacity: 0; -webkit-transform: scale(2.2); -ms-transform: scale(2.2); -o-transform: scale(2.2); transform: scale(2.2); } .effeckt-button.zoom-in[data-loading] .spinner { opacity: 1; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-caption { position: relative; float: left; overflow: hidden; } .effeckt-caption:nth-child(2n) { margin-right: 0; } .effeckt-caption img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption figcaption { position: absolute; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; width: 100%; } .effeckt-caption-1 figcaption { bottom: 0; left: 0; opacity: 0; } .effeckt-caption-1:hover figcaption, .effeckt-caption-1:active figcaption { opacity: 1; } .effeckt-caption-2 figcaption { bottom: 0; left: 0; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-caption-2:hover figcaption, .effeckt-caption-2:active figcaption { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effeckt-caption-3 figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: none; -o-transition: none; transition: none; z-index: 0; } .effeckt-caption-3 img { position: relative; z-index: 1; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .effeckt-caption-3 .effeckt-figcaption-wrap { position: absolute; bottom: 1rem; opacity: 0; -webkit-transition: opacity 0.25s linear 0s; -o-transition: opacity 0.25s linear 0s; transition: opacity 0.25s linear 0s; } .effeckt-caption-3:hover .effeckt-figcaption-wrap, .effeckt-caption-3:active .effeckt-figcaption-wrap { opacity: 1; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .effeckt-caption-3:hover img, .effeckt-caption-3:active img { -webkit-transform: scale(0.5) translateY(-80px); -ms-transform: scale(0.5) translateY(-80px); -o-transform: scale(0.5) translateY(-80px); transform: scale(0.5) translateY(-80px); -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .effeckt-caption-4 figcaption { left: 0; bottom: 0; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-caption-4:hover figcaption, .effeckt-caption-4:active figcaption { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption-5 figcaption { top: 0; left: 0; height: 100%; opacity: 0; } .effeckt-caption-5:hover figcaption, .effeckt-caption-5:active figcaption { opacity: 1; } .effeckt-caption-6 figcaption { top: 0; left: 0; -webkit-transform: translateX(100%) rotate(20deg); -ms-transform: translateX(100%) rotate(20deg); -o-transform: translateX(100%) rotate(20deg); transform: translateX(100%) rotate(20deg); opacity: 0; } .effeckt-caption-6:hover figcaption, .effeckt-caption-6:active figcaption { -webkit-transform: translateX(0) rotate(0deg); -ms-transform: translateX(0) rotate(0deg); -o-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } .effeckt-caption-7 figcaption { top: 0; left: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; z-index: 2; } .effeckt-caption-7 .effeckt-figcaption-wrap { -webkit-transition: 500ms 250ms; -o-transition: 500ms 250ms; transition: 500ms 250ms; -webkit-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } .effeckt-caption-7:hover figcaption, .effeckt-caption-7:active figcaption { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-caption-7:hover .effeckt-figcaption-wrap, .effeckt-caption-7:active .effeckt-figcaption-wrap { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption-8 figcaption { top: 0; left: 0; height: 100%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .effeckt-caption-8 img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption-8:hover figcaption, .effeckt-caption-8:active figcaption { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-caption-8:hover img, .effeckt-caption-8:active img { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-caption-9 figcaption { top: 0; left: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); text-align: center; opacity: 0; } .effeckt-caption-9 img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption-9:hover figcaption, .effeckt-caption-9:active figcaption { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .effeckt-caption-9:hover img, .effeckt-caption-9:active img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .effeckt-caption-10 { overflow: visible; -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } .effeckt-caption-10 figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-caption-10 img { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .effeckt-caption-10:hover figcaption, .effeckt-caption-10:active figcaption { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } .effeckt-caption-10:hover img, .effeckt-caption-10:active img { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .effeckt-list[data-type='pop-in'] { overflow: hidden; } .effeckt-list[data-type='pop-in'] .new-item { max-height: 0; opacity: 0; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px); -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; -o-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; } .effeckt-list[data-type='pop-in'] .remove-item { max-height: 50px; opacity: 1; -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; -o-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; } @-webkit-keyframes openSpace { to { max-height: 100px; } } @-o-keyframes openSpace { to { max-height: 100px; } } @keyframes openSpace { to { max-height: 100px; } } @-webkit-keyframes moveIn { to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes moveIn { to { opacity: 1; -o-transform: translateX(0); transform: translateX(0); } } @keyframes moveIn { to { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes moveOut { to { opacity: 0; -webkit-transform: translateX(-300px); transform: translateX(-300px); } } @-o-keyframes moveOut { to { opacity: 0; -o-transform: translateX(-300px); transform: translateX(-300px); } } @keyframes moveOut { to { opacity: 0; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px); } } @-webkit-keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } @-o-keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } @keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } .effeckt-list[data-type='expand-in'] .new-item { max-height: 0; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-animation: growHeight 500ms ease forwards; -o-animation: growHeight 500ms ease forwards; animation: growHeight 500ms ease forwards; } .effeckt-list[data-type='expand-in'] .remove-item { -webkit-animation: shrinkHeight 500ms ease forwards; -o-animation: shrinkHeight 500ms ease forwards; animation: shrinkHeight 500ms ease forwards; } @-webkit-keyframes growHeight { to { max-height: 100px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes growHeight { to { max-height: 100px; opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes growHeight { to { max-height: 100px; opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes shrinkHeight { to { max-height: 0; opacity: 1; -webkit-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes shrinkHeight { to { max-height: 0; opacity: 1; -o-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes shrinkHeight { to { max-height: 0; opacity: 1; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .effeckt-list[data-type='wobble-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; -o-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; } .effeckt-list[data-type='wobble-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; -o-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; } @-webkit-keyframes WobbleInX { 0% { -webkit-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -webkit-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -webkit-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @-o-keyframes WobbleInX { 0% { -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -o-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @keyframes WobbleInX { 0% { -webkit-transform: perspective(250px) rotateX(90deg); -ms-transform: perspective(250px) rotateX(90deg); -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(250px) rotateX(-10deg); -ms-transform: perspective(250px) rotateX(-10deg); -o-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -webkit-transform: perspective(250px) rotateX(10deg); -ms-transform: perspective(250px) rotateX(10deg); -o-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -webkit-transform: perspective(250px) rotateX(0deg); -ms-transform: perspective(250px) rotateX(0deg); -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @-webkit-keyframes WobbleOutX { 0% { -webkit-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } @-o-keyframes WobbleOutX { 0% { -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } @keyframes WobbleOutX { 0% { -webkit-transform: perspective(250px) rotateX(0deg); -ms-transform: perspective(250px) rotateX(0deg); -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(250px) rotateX(90deg); -ms-transform: perspective(250px) rotateX(90deg); -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } .effeckt-list[data-type='flip-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; -o-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; } .effeckt-list[data-type='flip-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; -o-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; } @-webkit-keyframes FlipIn { 0% { -webkit-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @-o-keyframes FlipIn { 0% { -o-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @keyframes FlipIn { 0% { -webkit-transform: perspective(300px) rotateX(90deg); -ms-transform: perspective(300px) rotateX(90deg); -o-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(300px) rotateX(0deg); -ms-transform: perspective(300px) rotateX(0deg); -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @-webkit-keyframes FlipOut { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes FlipOut { 0% { -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes FlipOut { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .effeckt-list-scroll { position: relative; overflow-x: hidden; overflow-y: scroll; -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } .effeckt-list-scroll > li { position: relative; z-index: 2; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } [data-effeckt="grow"] li { -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } [data-effeckt="grow"] li.past, [data-effeckt="grow"] li.future { -webkit-transform: scale(0.01); -ms-transform: scale(0.01); -o-transform: scale(0.01); transform: scale(0.01); } [data-effeckt="curl"] li { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 50%; -ms-perspective-origin: 0% 50%; -o-perspective-origin: 0% 50%; perspective-origin: 0% 50%; -webkit-transition: all 500ms ease, opacity 166.66667ms ease; -o-transition: all 500ms ease, opacity 166.66667ms ease; transition: all 500ms ease, opacity 166.66667ms ease; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } [data-effeckt="curl"] li.past { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } [data-effeckt="curl"] li.future { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } [data-effeckt="wave"] li { -webkit-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } [data-effeckt="wave"] li.past { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); -o-transform: translateX(-70%); transform: translateX(-70%); } [data-effeckt="wave"] li.future { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); -o-transform: translateX(-70%); transform: translateX(-70%); } [data-effeckt="fan"] li { -webkit-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } [data-effeckt="fan"] li.past { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } [data-effeckt="fan"] li.future { -webkit-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); transform: rotate(70deg); } [data-effeckt="fade"] li { -webkit-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } [data-effeckt="fade"] li.past, [data-effeckt="fade"] li.future { opacity: 0; } [data-effeckt="fly"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt="fly"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: 50% 50% -50px; -ms-transform-origin: 50% 50% -50px; -o-transform-origin: 50% 50% -50px; transform-origin: 50% 50% -50px; } [data-effeckt="fly"] li.past, [data-effeckt="fly"] li.future { opacity: 0; } [data-effeckt="fly"] li.past { -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } [data-effeckt="fly"] li.future { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .effeckt-modal-wrap { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: fixed; top: 50%; left: 50%; width: 50%; max-width: 320px; min-width: 630px; z-index: 2000; display: none; } .effeckt-modal { visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-show .effeckt-modal { visibility: visible; } .effeckt-overlay.effeckt-show { opacity: 1; visibility: visible; } .effeckt-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } /* Individual modal styles with animations/transitions */ /* Effect 1: From Above */ .md-effect-1 .effeckt-modal { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-1 .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 5: From below*/ .md-effect-5 .effeckt-modal { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-5 .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 2: Slide from the right */ .md-effect-2 .effeckt-modal { -webkit-transform: translateX(30%); -ms-transform: translateX(30%); -o-transform: translateX(30%); transform: translateX(30%); opacity: 0; -webkit-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); -o-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); } .effeckt-show.md-effect-2 .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } /* Effect 3: Slide from the bottom */ .md-effect-3 .effeckt-modal { -webkit-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-3 .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Effect 4: Newspaper */ .md-effect-4 .effeckt-modal { -webkit-transform: scale(0.5) rotate(720deg); -ms-transform: scale(0.5) rotate(720deg); -o-transform: scale(0.5) rotate(720deg); transform: scale(0.5) rotate(720deg); opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .effeckt-show.md-effect-4 .effeckt-modal { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } /* Effect 6: side fall */ .md-effect-6.effeckt-modal-wrap { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-6 .effeckt-modal { -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg); -ms-transform: translateZ(600px) translateX(30%) rotate(10deg); -o-transform: translateZ(600px) translateX(30%) rotate(10deg); transform: translateZ(600px) translateX(30%) rotate(10deg); opacity: 0; } .effeckt-show.md-effect-6 .effeckt-modal { -webkit-transition: 500ms ease-in; -o-transition: 500ms ease-in; transition: 500ms ease-in; -webkit-transform: translateZ(0) translateX(0) rotate(0deg); -ms-transform: translateZ(0) translateX(0) rotate(0deg); -o-transform: translateZ(0) translateX(0) rotate(0deg); transform: translateZ(0) translateX(0) rotate(0deg); opacity: 1; } .effeckt-hide.md-effect-6 .effeckt-modal { -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; opacity: 0; } /* Effect 7: slide and stick to top */ .md-effect-7 { top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .md-effect-7 .effeckt-modal { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0; } .effeckt-show.md-effect-7 .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Effect 8: 3D flip horizontal */ .md-effect-8 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-8 .effeckt-modal { -webkit-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); -o-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; opacity: 0; } .effeckt-show.md-effect-8 .effeckt-modal { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } /* Effect 9: 3D flip vertical */ .md-effect-9 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-9 .effeckt-modal { -webkit-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); -o-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; opacity: 0; } .effeckt-show.md-effect-9 .effeckt-modal { -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 10: 3D sign */ .md-effect-10 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-10 .effeckt-modal { -webkit-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); -o-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-10 .effeckt-modal { -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 12: Just me */ .md-effect-12 .effeckt-modal { opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-12 .effeckt-modal { opacity: 1; background: #555; } .effeckt-show.md-effect-12 ~ .effeckt-overlay { background: #555; } .md-effect-12, .md-effect-12 h3 { background: transparent; } /* Effect 13: 3D slit */ .md-effect-13 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-13 .effeckt-modal { -webkit-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); -o-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; } .effeckt-show.md-effect-13 .effeckt-modal { -webkit-animation: slit 0.7s forwards ease-out; -o-animation: slit 0.7s forwards ease-out; animation: slit 0.7s forwards ease-out; } .effeckt-hide.md-effect-13 .effeckt-modal { opacity: 0; -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } @-webkit-keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-o-keyframes slit { 50% { -o-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -o-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); -ms-transform: translateZ(-250px) rotateY(89deg); -o-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateZ(0) rotateY(0deg); -ms-transform: translateZ(0) rotateY(0deg); -o-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } /* Effect 14: 3D Rotate from bottom */ .md-effect-14 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-14 .effeckt-modal { -webkit-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); -o-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; } .effeckt-show.md-effect-14 .effeckt-modal { -webkit-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); -o-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } /* Effect 15: 3D Rotate in from left */ .md-effect-15 { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-15 .effeckt-modal { -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -o-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .effeckt-show.md-effect-15 .effeckt-modal { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); -o-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } /* Effect 16: Blur */ .effeckt-show.md-effect-16 ~ .md-overlay { background: rgba(180, 46, 32, 0.5); } .effeckt-show.md-effect-16 ~ .page-wrap { -webkit-filter: blur(3px); filter: blur(3px); } .md-effect-16 .effeckt-modal { opacity: 0; } .effeckt-show.md-effect-16 ~ .page-wrap, .md-effect-16 .effeckt-modal { -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .effeckt-show.md-effect-16 .effeckt-modal { opacity: 1; } /* Effect 17: Slide in from bottom with perspective on container */ .effeckt-show.md-effect-17 ~ .page-wrap { height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-show.md-effect-17 ~ .page-wrap, .effeckt-show.md-effect-17 ~ .effeckt-overlay { -webkit-transform: rotateX(-2deg); -ms-transform: rotateX(-2deg); -o-transform: rotateX(-2deg); transform: rotateX(-2deg); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-17 .effeckt-modal { opacity: 0; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } .effeckt-show.md-effect-17 .effeckt-modal { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; -webkit-transition: all 500ms 0.2s; -o-transition: all 500ms 0.2s; transition: all 500ms 0.2s; } .effeckt-hide.md-effect-17 .effeckt-modal { opacity: 0; -webkit-transition: all 500ms 0.2s; -o-transition: all 500ms 0.2s; transition: all 500ms 0.2s; } /* Effect 18: Slide from right with perspective on container */ .effeckt-show.md-effect-18 ~ .page-wrap { height: 100%; overflow: hidden; } .effeckt-show.md-effect-18 ~ .effeckt-overlay { background: rgba(0, 0, 0, 0.2); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .effeckt-show.md-effect-18 ~ .page-wrap, .effeckt-show.md-effect-18 ~ .effeckt-overlay { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in; -o-animation: rotateRightSideFirst 0.5s forwards ease-in; animation: rotateRightSideFirst 0.5s forwards ease-in; } @-webkit-keyframes rotateRightSideFirst { 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); } } @-o-keyframes rotateRightSideFirst { 50% { -o-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -o-transform: translateZ(-200px); transform: translateZ(-200px); } } @keyframes rotateRightSideFirst { 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); transform: translateZ(-200px); } } .md-effect-18 .effeckt-modal { -webkit-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); opacity: 0; } .effeckt-show.md-effect-18 .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all 0.5s 0.1s; -o-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; } .effeckt-hide.md-effect-18 .effeckt-modal { opacity: 0; -webkit-transition: all 0.5s 0.1s; -o-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; } /* Effect 19: Slip in from the top with perspective on container */ .effeckt-show.md-effect-19 ~ .page-wrap { height: 100%; overflow: hidden; } .effeckt-show.md-effect-19 ~ .effeckt-overlay { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.md-effect-19 ~ .page-wrap, .effeckt-show.md-effect-19 ~ .effeckt-overlay { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: OpenTop 500ms forwards ease-in; -o-animation: OpenTop 500ms forwards ease-in; animation: OpenTop 500ms forwards ease-in; } @-webkit-keyframes OpenTop { 50% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes OpenTop { 50% { -o-transform: rotateX(10deg); transform: rotateX(10deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes OpenTop { 50% { -webkit-transform: rotateX(10deg); -ms-transform: rotateX(10deg); -o-transform: rotateX(10deg); transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .md-effect-19 .effeckt-modal { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); opacity: 0; } .effeckt-show.md-effect-19 .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all 500ms 100ms; -o-transition: all 500ms 100ms; transition: all 500ms 100ms; } .effeckt-hide.md-effect-19 .effeckt-modal { opacity: 0; -webkit-transition: all 500ms 100ms; -o-transition: all 500ms 100ms; transition: all 500ms 100ms; } /* Effect 20: From the top to bottom with left tilt on the way out */ .md-effect-20 { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: -50% -50%; -ms-transform: -50% -50%; -o-transform: -50% -50%; transform: -50% -50%; top: -100%; opacity: 0; } .effeckt-show.md-effect-20 { top: 50%; opacity: 1; } .effeckt-hide.md-effect-20 { top: 100%; -webkit-transform: translateX(-50%) rotate(-29deg); -ms-transform: translateX(-50%) rotate(-29deg); -o-transform: translateX(-50%) rotate(-29deg); transform: translateX(-50%) rotate(-29deg); opacity: 0; } /* Effect 22: From the top to bottom */ .md-effect-22 { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: -50% -50%; -ms-transform: -50% -50%; -o-transform: -50% -50%; transform: -50% -50%; top: -100%; opacity: 0; } .effeckt-show.md-effect-22 { top: 50%; opacity: 1; } .effeckt-hide.md-effect-22 { top: 100%; opacity: 0; } /* Effect 23: From the bottom to bottom */ .md-effect-23 { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: -50% -50%; -ms-transform: -50% -50%; -o-transform: -50% -50%; transform: -50% -50%; top: 100%; opacity: 0; } .effeckt-show.md-effect-23 { top: 50%; opacity: 1; } .effeckt-hide.md-effect-23 { top: 100%; opacity: 0; } /* Effect 24: From the top to top */ .md-effect-24 { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: -50% -50%; -ms-transform: -50% -50%; -o-transform: -50% -50%; transform: -50% -50%; top: -100%; opacity: 0; } .effeckt-show.md-effect-24 { top: 50%; opacity: 1; } .effeckt-hide.md-effect-24 { top: -100%; opacity: 0; } .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .effeckt-off-screen-nav-show { visibility: visible; } .effeckt-off-screen-nav-left-overlay { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); -o-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); } .effeckt-off-screen-nav-left-overlay.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-push { -webkit-transform: translateX(-12rem); -ms-transform: translateX(-12rem); -o-transform: translateX(-12rem); transform: translateX(-12rem); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-push.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-push.effeckt-off-screen-nav-show ~ .page-wrap { -webkit-transform: translateX(12rem); -ms-transform: translateX(12rem); -o-transform: translateX(12rem); transform: translateX(12rem); } .effeckt-off-screen-nav-left-push ~ .page-wrap { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-squeeze { width: 20%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-squeeze.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-squeeze.effeckt-off-screen-nav-show ~ .page-wrap { width: 80%; } .effeckt-off-screen-nav-left-squeeze ~ .page-wrap { -webkit-transition: width 500ms; -o-transition: width 500ms; transition: width 500ms; max-width: none; } .effeckt-off-screen-nav-right-overlay { right: 0; left: auto; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); -o-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); } .effeckt-off-screen-nav-right-overlay.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-push { left: auto; right: 0; -webkit-transform: translateX(12rem); -ms-transform: translateX(12rem); -o-transform: translateX(12rem); transform: translateX(12rem); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-push.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-push.effeckt-off-screen-nav-show ~ .page-wrap { -webkit-transform: translateX(-12rem); -ms-transform: translateX(-12rem); -o-transform: translateX(-12rem); transform: translateX(-12rem); } .effeckt-off-screen-nav-right-push ~ .page-wrap { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-squeeze { left: auto; right: 0; width: 20%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-squeeze.effeckt-off-screen-nav-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-squeeze.effeckt-off-screen-nav-show ~ .page-wrap { width: 80%; } .effeckt-off-screen-nav-right-squeeze ~ .page-wrap { float: left; -webkit-transition: width 500ms; -o-transition: width 500ms; transition: width 500ms; max-width: none; } .effeckt-off-screen-nav-rotate { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg); -ms-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg); -o-transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg); transform: translateX(-100%) translateX(6px) scale(1.01) rotateY(-30deg); } .effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap { -webkit-transform: translateX(260px) rotateY(15deg); -ms-transform: translateX(260px) rotateY(15deg); -o-transform: translateX(260px) rotateY(15deg); transform: translateX(260px) rotateY(15deg); } .effeckt-off-screen-nav-rotate.effeckt-off-screen-nav-show ~ .page-wrap .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effeckt-off-screen-nav-rotate ~ .page-wrap { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .effeckt-page-transition.effeckt-page-transition-animating { visibility: visible; } .animation-delay-100 { -webkit-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .animation-delay-180 { -webkit-animation-delay: 0.18s; -o-animation-delay: 0.18s; animation-delay: 0.18s; } .animation-delay-200 { -webkit-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .animation-delay-300 { -webkit-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } .animation-delay-500 { -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .animation-delay-700 { -webkit-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .animation-delay-1000 { -webkit-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } .effeckt-page-transition-left-slide-in { -webkit-animation: slideInLeft 0.7s forwards ease-out; -o-animation: slideInLeft 0.7s forwards ease-out; animation: slideInLeft 0.7s forwards ease-out; } .effeckt-page-transition-right-slide-in { -webkit-animation: slideInRight 0.7s forwards ease-out; -o-animation: slideInRight 0.7s forwards ease-out; animation: slideInRight 0.7s forwards ease-out; } .effeckt-page-transition-top-slide-in { -webkit-animation: slideInTop 0.7s forwards ease-out; -o-animation: slideInTop 0.7s forwards ease-out; animation: slideInTop 0.7s forwards ease-out; } .effeckt-page-transition-bottom-slide-in { -webkit-animation: slideInBottom 0.7s forwards ease-out; -o-animation: slideInBottom 0.7s forwards ease-out; animation: slideInBottom 0.7s forwards ease-out; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { -o-transform: translateX(100%); transform: translateX(100%); } 100% { -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInRight { 0% { -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInTop { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInTop { 0% { -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInTop { 0% { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInBottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInBottom { 0% { -o-transform: translateY(100%); transform: translateY(100%); } 100% { -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInBottom { 0% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .effeckt-page-transition-left-slide-out { -webkit-animation: slideOutLeft 0.7s forwards ease-out; -o-animation: slideOutLeft 0.7s forwards ease-out; animation: slideOutLeft 0.7s forwards ease-out; } .effeckt-page-transition-right-slide-out { -webkit-animation: slideOutRight 0.7s forwards ease-out; -o-animation: slideOutRight 0.7s forwards ease-out; animation: slideOutRight 0.7s forwards ease-out; } .effeckt-page-transition-top-slide-out { -webkit-animation: slideOutTop 0.7s forwards ease-out; -o-animation: slideOutTop 0.7s forwards ease-out; animation: slideOutTop 0.7s forwards ease-out; } .effeckt-page-transition-bottom-slide-out { -webkit-animation: slideOutBottom 0.7s forwards ease-out; -o-animation: slideOutBottom 0.7s forwards ease-out; animation: slideOutBottom 0.7s forwards ease-out; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes slideOutLeft { 0% { -o-transform: translateX(0%); transform: translateX(0%); } 100% { -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes slideOutRight { 0% { -o-transform: translateX(0); transform: translateX(0); } 100% { -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideOutTop { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes slideOutTop { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutTop { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideOutBottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes slideOutBottom { 0% { -o-transform: translateY(0); transform: translateY(0); } 100% { -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideOutBottom { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } .effeckt-page-transition-down-scale-out { -webkit-animation: scaleDown 0.7s ease both; -o-animation: scaleDown 0.7s ease both; animation: scaleDown 0.7s ease both; } .effeckt-page-transition-up-scale-in { -webkit-animation: scaleUp 0.7s ease both; -o-animation: scaleUp 0.7s ease both; animation: scaleUp 0.7s ease both; } @-webkit-keyframes scaleDown { to { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-o-keyframes scaleDown { to { opacity: 0; -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes scaleDown { to { opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes scaleUp { from { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-o-keyframes scaleUp { from { opacity: 0; -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes scaleUp { from { opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } .effeckt-page-transition-left-fade-in { -webkit-animation: fadeLeftIn 0.7s ease both; -o-animation: fadeLeftIn 0.7s ease both; animation: fadeLeftIn 0.7s ease both; } .effeckt-page-transition-right-fade-in { -webkit-animation: fadeRightIn 0.7s ease both; -o-animation: fadeRightIn 0.7s ease both; animation: fadeRightIn 0.7s ease both; } .effeckt-page-transition-top-fade-in { -webkit-animation: fadeTopIn 0.7s ease both; -o-animation: fadeTopIn 0.7s ease both; animation: fadeTopIn 0.7s ease both; } .effeckt-page-transition-bottom-fade-in { -webkit-animation: fadeBottomIn 0.7s ease both; -o-animation: fadeBottomIn 0.7s ease both; animation: fadeBottomIn 0.7s ease both; } @-webkit-keyframes fadeLeftIn { to { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes fadeLeftIn { to { opacity: 0.3; -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes fadeLeftIn { to { opacity: 0.3; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes fadeRightIn { to { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes fadeRightIn { to { opacity: 0.3; -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes fadeRightIn { to { opacity: 0.3; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes fadeTopIn { to { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes fadeTopIn { to { opacity: 0.3; -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes fadeTopIn { to { opacity: 0.3; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes fadeBottomIn { to { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes fadeBottomIn { to { opacity: 0.3; -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes fadeBottomIn { to { opacity: 0.3; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } .effeckt-page-transition-left-fade-out { -webkit-animation: fadeLeftOut 0.7s ease both; -o-animation: fadeLeftOut 0.7s ease both; animation: fadeLeftOut 0.7s ease both; } .effeckt-page-transition-right-fade-out { -webkit-animation: fadeRightOut 0.7s ease both; -o-animation: fadeRightOut 0.7s ease both; animation: fadeRightOut 0.7s ease both; } .effeckt-page-transition-top-fade-out { -webkit-animation: fadeTopOut 0.7s ease both; -o-animation: fadeTopOut 0.7s ease both; animation: fadeTopOut 0.7s ease both; } .effeckt-page-transition-bottom-fade-out { -webkit-animation: fadeBottomOut 0.7s ease both; -o-animation: fadeBottomOut 0.7s ease both; animation: fadeBottomOut 0.7s ease both; } @-webkit-keyframes fadeLeftOut { from { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes fadeLeftOut { from { opacity: 0.3; -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes fadeLeftOut { from { opacity: 0.3; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes fadeRightOut { from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes fadeRightOut { from { opacity: 0.3; -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes fadeRightOut { from { opacity: 0.3; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes fadeTopOut { from { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes fadeTopOut { from { opacity: 0.3; -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes fadeTopOut { from { opacity: 0.3; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes fadeBottomOut { from { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes fadeBottomOut { from { opacity: 0.3; -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes fadeBottomOut { from { opacity: 0.3; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } .effeckt-page-transition-left-flip-in { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInLeft 0.5s both ease-out; -o-animation: flipInLeft 0.5s both ease-out; animation: flipInLeft 0.5s both ease-out; } .effeckt-page-transition-right-flip-out { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutRight 0.5s both ease-in; -o-animation: flipOutRight 0.5s both ease-in; animation: flipOutRight 0.5s both ease-in; } @-webkit-keyframes flipInLeft { from { opacity: 0.2; -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); } } @-o-keyframes flipInLeft { from { opacity: 0.2; -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); } } @keyframes flipInLeft { from { opacity: 0.2; -webkit-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); } } @-webkit-keyframes flipOutRight { to { opacity: 0.2; -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); } } @-o-keyframes flipOutRight { to { opacity: 0.2; -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); } } @keyframes flipOutRight { to { opacity: 0.2; -webkit-transform: translateZ(-1000px) rotateY(90deg); -ms-transform: translateZ(-1000px) rotateY(90deg); -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); } } .effeckt-page-transition-newspaper-out { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateOutNewspaper 0.5s both ease-in; -o-animation: rotateOutNewspaper 0.5s both ease-in; animation: rotateOutNewspaper 0.5s both ease-in; } .effeckt-page-transition-newspaper-in { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateInNewspaper 0.5s both ease-out; -o-animation: rotateInNewspaper 0.5s both ease-out; animation: rotateInNewspaper 0.5s both ease-out; } @-webkit-keyframes rotateOutNewspaper { to { opacity: 1; -webkit-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); } } @-o-keyframes rotateOutNewspaper { to { opacity: 1; -o-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); } } @keyframes rotateOutNewspaper { to { opacity: 1; -webkit-transform: translateZ(-3000px) rotateZ(360deg); -ms-transform: translateZ(-3000px) rotateZ(360deg); -o-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); } } @-webkit-keyframes rotateInNewspaper { from { opacity: 1; -webkit-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); } } @-o-keyframes rotateInNewspaper { from { opacity: 1; -o-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); } } @keyframes rotateInNewspaper { from { opacity: 1; -webkit-transform: translateZ(-3000px) rotateZ(-360deg); -ms-transform: translateZ(-3000px) rotateZ(-360deg); -o-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); } } .effeckt-page-transition-left-rotate-push { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: rotatePushLeft 0.8s both ease; -o-animation: rotatePushLeft 0.8s both ease; animation: rotatePushLeft 0.8s both ease; } .effeckt-page-transition-right-rotate-push { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePushRight 0.8s both ease; -o-animation: rotatePushRight 0.8s both ease; animation: rotatePushRight 0.8s both ease; } .effeckt-page-transition-top-rotate-push { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: rotatePushTop 0.8s both ease; -o-animation: rotatePushTop 0.8s both ease; animation: rotatePushTop 0.8s both ease; } .effeckt-page-transition-bottom-rotate-push { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePushBottom 0.8s both ease; -o-animation: rotatePushBottom 0.8s both ease; animation: rotatePushBottom 0.8s both ease; } @-webkit-keyframes rotatePushLeft { to { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } } @-o-keyframes rotatePushLeft { to { opacity: 0; -o-transform: rotateY(90deg); transform: rotateY(90deg); } } @keyframes rotatePushLeft { to { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } } @-webkit-keyframes rotatePushRight { to { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @-o-keyframes rotatePushRight { to { opacity: 0; -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @keyframes rotatePushRight { to { opacity: 0; -webkit-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @-webkit-keyframes rotatePushTop { to { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-o-keyframes rotatePushTop { to { opacity: 0; -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @keyframes rotatePushTop { to { opacity: 0; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-webkit-keyframes rotatePushBottom { to { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } } @-o-keyframes rotatePushBottom { to { opacity: 0; -o-transform: rotateX(90deg); transform: rotateX(90deg); } } @keyframes rotatePushBottom { to { opacity: 0; -webkit-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } } .effeckt-page-transition-left-rotate-pull { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: rotatePullLeft 0.5s both ease; -o-animation: rotatePullLeft 0.5s both ease; animation: rotatePullLeft 0.5s both ease; } .effeckt-page-transition-right-rotate-pull { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePullRight 0.5s both ease; -o-animation: rotatePullRight 0.5s both ease; animation: rotatePullRight 0.5s both ease; } .effeckt-page-transition-top-rotate-pull { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: rotatePullTop 0.5s both ease; -o-animation: rotatePullTop 0.5s both ease; animation: rotatePullTop 0.5s both ease; } .effeckt-page-transition-bottom-rotate-pull { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePullBottom 0.5s both ease; -o-animation: rotatePullBottom 0.5s both ease; animation: rotatePullBottom 0.5s both ease; } @-webkit-keyframes rotatePullLeft { from { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } } @-o-keyframes rotatePullLeft { from { opacity: 0; -o-transform: rotateY(90deg); transform: rotateY(90deg); } } @keyframes rotatePullLeft { from { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } } @-webkit-keyframes rotatePullRight { from { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @-o-keyframes rotatePullRight { from { opacity: 0; -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @keyframes rotatePullRight { from { opacity: 0; -webkit-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } } @-webkit-keyframes rotatePullTop { from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-o-keyframes rotatePullTop { from { opacity: 0; -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @keyframes rotatePullTop { from { opacity: 0; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } } @-webkit-keyframes rotatePullBottom { from { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } } @-o-keyframes rotatePullBottom { from { opacity: 0; -o-transform: rotateX(90deg); transform: rotateX(90deg); } } @keyframes rotatePullBottom { from { opacity: 0; -webkit-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } } .effeckt-page-transition-left-rotate-fold { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateFoldLeft 0.7s both ease; -o-animation: rotateFoldLeft 0.7s both ease; animation: rotateFoldLeft 0.7s both ease; } .effeckt-page-transition-right-rotate-fold { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: rotateFoldRight 0.7s both ease; -o-animation: rotateFoldRight 0.7s both ease; animation: rotateFoldRight 0.7s both ease; } .effeckt-page-transition-top-rotate-fold { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateFoldTop 0.7s both ease; -o-animation: rotateFoldTop 0.7s both ease; animation: rotateFoldTop 0.7s both ease; } .effeckt-page-transition-bottom-rotate-fold { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: rotateFoldBottom 0.7s both ease; -o-animation: rotateFoldBottom 0.7s both ease; animation: rotateFoldBottom 0.7s both ease; } @-webkit-keyframes rotateFoldLeft { to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); } } @-o-keyframes rotateFoldLeft { to { opacity: 0; -o-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); } } @keyframes rotateFoldLeft { to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); -ms-transform: translateX(-100%) rotateY(-90deg); -o-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); } } @-webkit-keyframes rotateFoldRight { to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); } } @-o-keyframes rotateFoldRight { to { opacity: 0; -o-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); } } @keyframes rotateFoldRight { to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); -ms-transform: translateX(100%) rotateY(90deg); -o-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); } } @-webkit-keyframes rotateFoldTop { to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); } } @-o-keyframes rotateFoldTop { to { opacity: 0; -o-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); } } @keyframes rotateFoldTop { to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); -ms-transform: translateY(-100%) rotateX(90deg); -o-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); } } @-webkit-keyframes rotateFoldBottom { to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); } } @-o-keyframes rotateFoldBottom { to { opacity: 0; -o-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); } } @keyframes rotateFoldBottom { to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); -ms-transform: translateY(100%) rotateX(-90deg); -o-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); } }