Last active
July 3, 2016 09:51
-
-
Save ivanseidel/9041349 to your computer and use it in GitHub Desktop.
Animation and Transition Controller for CSS3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Copyright 2014 Ivan Seidel | |
| Light controll for animations and transitions | |
| When animating 'fromElement' to 'toElement', with options: | |
| $.transition(toElement, fromElement, options); | |
| $.transition(toElement, options); | |
| $.transition(toElement); | |
| When animating 'toElement', that is inside 'container', | |
| this library will automatically try to find last element | |
| and set it as the fromElement: | |
| $('container').transition.to(toElement, options) | |
| $('container').transition.to(toElement) | |
| Note: Options will be saved to container, allowing you | |
| to use this method without any options. If you want to | |
| setup it your self, use: | |
| $('container').setup(options); | |
| This way, all transitions called from container, will | |
| have it's defaults options already set. Ex: | |
| $('container').transition.setup({ | |
| visibleClass: 'myVisibleClass' | |
| }); | |
| $('container').transition.to(element); | |
| To override options, use: | |
| $.transition.defaults.cssType = 'animation'; | |
| This code was build with Modernizr and Bootstrap, and are | |
| only needed to allow the code to know witch eventName | |
| adequates the browser. | |
| Both options must be a string on: | |
| $.support.animation.end, or | |
| $.support.transition.end | |
| */ | |
| (function ( $ ){ | |
| // Find out correct animation end event name (depends on browser) | |
| var animEndEventNames = { | |
| 'WebkitAnimation' : 'webkitAnimationEnd', | |
| 'OAnimation' : 'oAnimationEnd', | |
| 'msAnimation' : 'MSAnimationEnd', | |
| 'animation' : 'animationend' | |
| }; | |
| // Save to global | |
| $.support.animation = {end: animEndEventNames[ Modernizr.prefixed('animation') ] }; | |
| // Emulate event if not sent for a given time | |
| $.fn.emulateEvent = function (eventName, duration) { | |
| var called = false, $el = this | |
| $(this).one(eventName, function () { called = true }) | |
| var callback = function () { if (!called) $($el).trigger(eventName) } | |
| setTimeout(callback, duration) | |
| return this | |
| } | |
| /* | |
| Helper function used to get jQuery view inside view object, or return view itself | |
| It also checks if the view has it's saved values, if not, then save it | |
| */ | |
| var saveClass = function(view){ | |
| if(!view) return; | |
| // If not saved, save it | |
| if(!view.data('originalClassList')) | |
| view.data('originalClassList', view.attr( 'class' )); | |
| return view; | |
| }; | |
| /* | |
| Restore view default classes | |
| */ | |
| var restoreClass = function(view){ | |
| if(!view) return; | |
| // Restore | |
| view.attr('class', view.data('originalClassList')); | |
| return view; | |
| }; | |
| /* | |
| Transition method | |
| */ | |
| $.transition = function(to, from, options){ | |
| // Adequate for multy param types | |
| if(!options) { | |
| options = from; | |
| from = null; | |
| } | |
| // jQueryfy elements (allow usage as strings) | |
| if(to) to = $(to); | |
| if(from) from = $(from); | |
| // Set defaults to options | |
| options = $.extend($.transition.defaults, options); | |
| // saveClass | |
| if(options.saveClass && from) saveClass(from); | |
| if(options.saveClass && to) saveClass(to); | |
| // restoreClass from class | |
| if( options.restoreClass && to ) restoreClass(to).addClass(options.visibleClass); | |
| if( options.restoreClass && from ) restoreClass(from).addClass(options.visibleClass); | |
| // Get event name to listent to | |
| var eventName = $.support[options.cssType].end; | |
| // Set animation properties | |
| if(from){ | |
| from//.off( eventName ) | |
| .addClass( options.outClass ) | |
| .one( eventName, onEnd ) | |
| .emulateEvent(eventName, options.timeout ); | |
| } | |
| if(to){ | |
| to//.off( eventName ) | |
| .addClass( options.inClass ) | |
| .one( eventName, onEnd ) | |
| .emulateEvent(eventName, options.timeout ); | |
| } | |
| var cbCount = 0; | |
| var cbTarget = (from ? from.length: 0) + (to.length ? 1 : 0); | |
| function onEnd(){ | |
| if(cbTarget < ++cbCount) return; | |
| // Restor classes, and set visible and invisible class to elements | |
| if(options.restoreClass && from) restoreClass(from); | |
| if(options.restoreClass && to) restoreClass(to); | |
| if(options.visibleClass && to) to.addClass(options.visibleClass); | |
| if(options.invisibleClass && from) from.addClass(options.invisibleClass); | |
| if(options.onEnd) options.onEnd(); | |
| } | |
| // If no from or to is set, let's trigger it anyway (async) | |
| if(cbTarget <= 0) setTimeout(onEnd, 0); | |
| } | |
| // Default options for transitions | |
| $.transition.defaults = { | |
| // Callback | |
| onEnd: null, | |
| // Class that will be added to 'from' element | |
| outClass: 'pt-page-moveToRight', | |
| // Class that will be added to 'to' element | |
| inClass: 'pt-page-moveFromLeft', | |
| // Set to true, if class will be saved (if not saved yet) into element's data | |
| saveClass: true, | |
| // Set to true, if, at the START and END, the class will be restored | |
| restoreClass: true, | |
| // Class that will be added to 'to' element after end | |
| visibleClass: 'pt-page-current', | |
| // Class that will be added to 'from' element after end | |
| invisibleClass: '', | |
| // Timeout for animations | |
| timeout: 1500, | |
| // Type of animation ( animation|transition ) | |
| cssType: 'animation', | |
| }; | |
| $.fn.transition = {}; | |
| // Setup the container to allow automatic transition | |
| $.fn.transition.setup = function(options, notOverride){ | |
| $this = $(this); | |
| if(!notOverride || $this.data('transitionOptions')) | |
| $(this).data('transitionOptions', options); | |
| } | |
| $.fn.transition.to = function(to, options){ | |
| // Save if not saved | |
| $this = $(this); | |
| $this.transition.setup(options, true); | |
| // Get options | |
| options = $.extend({}, options, $this.data('transitionOptions')); | |
| // Try to get last element from saved, or elements with the visibleClass | |
| var from = $this.data('transitionLast') || $this.find('.'+options.visibleClass) || null; | |
| $this.data('transitionLast', to); | |
| // Transitionate | |
| $.transition(to, from, options); | |
| } | |
| }( $ )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This is a already done list of animations with CSS | |
| Take a look at this amazing article with a bunch of cool transitions: | |
| http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ | |
| */ | |
| var animations: { | |
| 'moveToLeft': { | |
| outClass: 'pt-page-moveToLeft', | |
| inClass: 'pt-page-moveFromRight', | |
| }, | |
| 'moveToRight': { | |
| outClass: 'pt-page-moveToRight', | |
| inClass: 'pt-page-moveFromLeft', | |
| }, | |
| 'moveToTop': { | |
| outClass: 'pt-page-moveToTop', | |
| inClass: 'pt-page-moveFromBottom', | |
| }, | |
| 'moveToBottom': { | |
| outClass: 'pt-page-moveToBottom', | |
| inClass: 'pt-page-moveFromTop', | |
| }, | |
| 'fadeRight': { | |
| outClass: 'pt-page-fade', | |
| inClass: 'pt-page-moveFromRight pt-page-ontop', | |
| }, | |
| 'fadeLeft': { | |
| outClass: 'pt-page-fade', | |
| inClass: 'pt-page-moveFromLeft pt-page-ontop', | |
| }, | |
| 'fadeBottom': { | |
| outClass: 'pt-page-fade', | |
| inClass: 'pt-page-moveFromBottom pt-page-ontop', | |
| }, | |
| 'fadeTop': { | |
| outClass: 'pt-page-fade', | |
| inClass: 'pt-page-moveFromTop pt-page-ontop', | |
| }, | |
| 'moveToLeftFade': { | |
| outClass: 'pt-page-moveToLeftFade', | |
| inClass: 'pt-page-moveFromRightFade', | |
| }, | |
| 'moveToRightFade': { | |
| outClass: 'pt-page-moveToRightFade', | |
| inClass: 'pt-page-moveFromLeftFade', | |
| }, | |
| 'moveToTopFade': { | |
| outClass: 'pt-page-moveToTopFade', | |
| inClass: 'pt-page-moveFromBottomFade', | |
| }, | |
| 'moveToBottomFade': { | |
| outClass: 'pt-page-moveToBottomFade', | |
| inClass: 'pt-page-moveFromTopFade', | |
| }, | |
| 'moveToLeftEasing': { | |
| outClass: 'pt-page-moveToLeftEasing pt-page-ontop', | |
| inClass: 'pt-page-moveFromRight', | |
| }, | |
| 'moveToRightEasing': { | |
| outClass: 'pt-page-moveToRightEasing pt-page-ontop', | |
| inClass: 'pt-page-moveFromLeft', | |
| }, | |
| 'moveToTopEasing': { | |
| outClass: 'pt-page-moveToTopEasing pt-page-ontop', | |
| inClass: 'pt-page-moveFromBottom', | |
| }, | |
| 'moveToBottomEasing': { | |
| outClass: 'pt-page-moveToBottomEasing pt-page-ontop', | |
| inClass: 'pt-page-moveFromTop', | |
| }, | |
| 'scaleDownRight': { | |
| outClass: 'pt-page-scaleDown', | |
| inClass: 'pt-page-moveFromRight pt-page-ontop', | |
| }, | |
| 'scaleDownLeft': { | |
| outClass: 'pt-page-scaleDown', | |
| inClass: 'pt-page-moveFromLeft pt-page-ontop', | |
| }, | |
| 'scaleDownBottom': { | |
| outClass: 'pt-page-scaleDown', | |
| inClass: 'pt-page-moveFromBottom pt-page-ontop', | |
| }, | |
| 'scaleDownTop': { | |
| outClass: 'pt-page-scaleDown', | |
| inClass: 'pt-page-moveFromTop pt-page-ontop', | |
| }, | |
| 'scaleDownDown': { | |
| outClass: 'pt-page-scaleDown', | |
| inClass: 'pt-page-scaleUpDown pt-page-delay300', | |
| }, | |
| 'scaleDownUp': { | |
| outClass: 'pt-page-scaleDownUp', | |
| inClass: 'pt-page-scaleUp pt-page-delay300', | |
| }, | |
| 'moveToLeftWithScale': { | |
| outClass: 'pt-page-moveToLeft pt-page-ontop', | |
| inClass: 'pt-page-scaleUp', | |
| }, | |
| 'moveToRightWithScale': { | |
| outClass: 'pt-page-moveToRight pt-page-ontop', | |
| inClass: 'pt-page-scaleUp', | |
| }, | |
| 'moveToTopWithScale': { | |
| outClass: 'pt-page-moveToTop pt-page-ontop', | |
| inClass: 'pt-page-scaleUp', | |
| }, | |
| 'moveToBottomWithScale': { | |
| outClass: 'pt-page-moveToBottom pt-page-ontop', | |
| inClass: 'pt-page-scaleUp', | |
| }, | |
| 'scaleDownCenter': { | |
| outClass: 'pt-page-scaleDownCenter', | |
| inClass: 'pt-page-scaleUpCenter pt-page-delay400', | |
| }, | |
| 'rotateRightSideFirst': { | |
| outClass: 'pt-page-rotateRightSideFirst', | |
| inClass: 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop', | |
| }, | |
| 'rotateLeftSideFirst': { | |
| outClass: 'pt-page-rotateLeftSideFirst', | |
| inClass: 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop', | |
| }, | |
| 'rotateTopSideFirst': { | |
| outClass: 'pt-page-rotateTopSideFirst', | |
| inClass: 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop', | |
| }, | |
| 'rotateBottomSideFirst': { | |
| outClass: 'pt-page-rotateBottomSideFirst', | |
| inClass: 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop', | |
| }, | |
| 'flipOutRight': { | |
| outClass: 'pt-page-flipOutRight', | |
| inClass: 'pt-page-flipInLeft pt-page-delay500', | |
| }, | |
| 'flipOutLeft': { | |
| outClass: 'pt-page-flipOutLeft', | |
| inClass: 'pt-page-flipInRight pt-page-delay500', | |
| }, | |
| 'flipOutTop': { | |
| outClass: 'pt-page-flipOutTop', | |
| inClass: 'pt-page-flipInBottom pt-page-delay500', | |
| }, | |
| 'flipOutBottom': { | |
| outClass: 'pt-page-flipOutBottom', | |
| inClass: 'pt-page-flipInTop pt-page-delay500', | |
| }, | |
| 'rotateFall': { | |
| outClass: 'pt-page-rotateFall pt-page-ontop', | |
| inClass: 'pt-page-scaleUp', | |
| }, | |
| 'rotateOutNewspaper': { | |
| outClass: 'pt-page-rotateOutNewspaper', | |
| inClass: 'pt-page-rotateInNewspaper pt-page-delay500', | |
| }, | |
| 'rotatePushLeft': { | |
| outClass: 'pt-page-rotatePushLeft', | |
| inClass: 'pt-page-moveFromRight', | |
| }, | |
| 'rotatePushRight': { | |
| outClass: 'pt-page-rotatePushRight', | |
| inClass: 'pt-page-moveFromLeft', | |
| }, | |
| 'rotatePushTop': { | |
| outClass: 'pt-page-rotatePushTop', | |
| inClass: 'pt-page-moveFromBottom', | |
| }, | |
| 'rotatePushBottom': { | |
| outClass: 'pt-page-rotatePushBottom', | |
| inClass: 'pt-page-moveFromTop', | |
| }, | |
| 'rotatePushLeft': { | |
| outClass: 'pt-page-rotatePushLeft', | |
| inClass: 'pt-page-rotatePullRight pt-page-delay180', | |
| }, | |
| 'rotatePushRight': { | |
| outClass: 'pt-page-rotatePushRight', | |
| inClass: 'pt-page-rotatePullLeft pt-page-delay180', | |
| }, | |
| 'rotatePushTop': { | |
| outClass: 'pt-page-rotatePushTop', | |
| inClass: 'pt-page-rotatePullBottom pt-page-delay180', | |
| }, | |
| 'rotatePushBottomPull': { | |
| outClass: 'pt-page-rotatePushBottom', | |
| inClass: 'pt-page-rotatePullTop pt-page-delay180', | |
| }, | |
| 'rotateFoldLeft': { | |
| outClass: 'pt-page-rotateFoldLeft', | |
| inClass: 'pt-page-moveFromRightFade', | |
| }, | |
| 'rotateFoldRight': { | |
| outClass: 'pt-page-rotateFoldRight', | |
| inClass: 'pt-page-moveFromLeftFade', | |
| }, | |
| 'rotateFoldTop': { | |
| outClass: 'pt-page-rotateFoldTop', | |
| inClass: 'pt-page-moveFromBottomFade', | |
| }, | |
| 'rotateFoldBottom': { | |
| outClass: 'pt-page-rotateFoldBottom', | |
| inClass: 'pt-page-moveFromTopFade', | |
| }, | |
| 'moveToRightFadeUnfold': { | |
| outClass: 'pt-page-moveToRightFade', | |
| inClass: 'pt-page-rotateUnfoldLeft', | |
| }, | |
| 'moveToLeftFadeUnfold': { | |
| outClass: 'pt-page-moveToLeftFade', | |
| inClass: 'pt-page-rotateUnfoldRight', | |
| }, | |
| 'moveToBottomFadeUnfold': { | |
| outClass: 'pt-page-moveToBottomFade', | |
| inClass: 'pt-page-rotateUnfoldTop', | |
| }, | |
| 'moveToTopFadeUnfold': { | |
| outClass: 'pt-page-moveToTopFade', | |
| inClass: 'pt-page-rotateUnfoldBottom', | |
| }, | |
| 'rotateRoomLeftOut': { | |
| outClass: 'pt-page-rotateRoomLeftOut pt-page-ontop', | |
| inClass: 'pt-page-rotateRoomLeftIn', | |
| }, | |
| 'rotateRoomRightOut': { | |
| outClass: 'pt-page-rotateRoomRightOut pt-page-ontop', | |
| inClass: 'pt-page-rotateRoomRightIn', | |
| }, | |
| 'rotateRoomTopOut': { | |
| outClass: 'pt-page-rotateRoomTopOut pt-page-ontop', | |
| inClass: 'pt-page-rotateRoomTopIn', | |
| }, | |
| 'rotateRoomBottomOut': { | |
| outClass: 'pt-page-rotateRoomBottomOut pt-page-ontop', | |
| inClass: 'pt-page-rotateRoomBottomIn', | |
| }, | |
| 'rotateCubeLeftOut': { | |
| outClass: 'pt-page-rotateCubeLeftOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCubeLeftIn', | |
| }, | |
| 'rotateCubeRightOut': { | |
| outClass: 'pt-page-rotateCubeRightOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCubeRightIn', | |
| }, | |
| 'rotateCubeTopOut': { | |
| outClass: 'pt-page-rotateCubeTopOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCubeTopIn', | |
| }, | |
| 'rotateCubeBottomOut': { | |
| outClass: 'pt-page-rotateCubeBottomOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCubeBottomIn', | |
| }, | |
| 'rotateCarouselLeftOut': { | |
| outClass: 'pt-page-rotateCarouselLeftOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCarouselLeftIn', | |
| }, | |
| 'rotateCarouselRightOut': { | |
| outClass: 'pt-page-rotateCarouselRightOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCarouselRightIn', | |
| }, | |
| 'rotateCarouselTopOut': { | |
| outClass: 'pt-page-rotateCarouselTopOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCarouselTopIn', | |
| }, | |
| 'rotateCarouselBottomOut': { | |
| outClass: 'pt-page-rotateCarouselBottomOut pt-page-ontop', | |
| inClass: 'pt-page-rotateCarouselBottomIn', | |
| }, | |
| 'rotateSidesOut': { | |
| outClass: 'pt-page-rotateSidesOut', | |
| inClass: 'pt-page-rotateSidesIn pt-page-delay200', | |
| }, | |
| 'rotateSlideOut': { | |
| outClass: 'pt-page-rotateSlideOut', | |
| inClass: 'pt-page-rotateSlideIn', | |
| } | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Taken from: | |
| http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ | |
| Add `pt-perspective` class to div that holds views. | |
| Add `pt-page` class to every child inside that div. | |
| */ | |
| .pt-perspective { | |
| /*position: relative;*/ | |
| /*width: 100%;*/ | |
| /*height: 100%;*/ | |
| -webkit-perspective: 1200px; | |
| -moz-perspective: 1200px; | |
| perspective: 1200px; | |
| } | |
| .pt-page { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| visibility: hidden; | |
| overflow: hidden; | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } | |
| .pt-page-current, | |
| .no-js .pt-page { | |
| visibility: visible; | |
| z-index: 1; | |
| } | |
| .pt-page-ontop { | |
| z-index: 999; | |
| } | |
| /* animation sets */ | |
| /* move from / to */ | |
| .pt-page-moveToLeft { | |
| -webkit-animation: moveToLeft .6s ease both; | |
| -moz-animation: moveToLeft .6s ease both; | |
| animation: moveToLeft .6s ease both; | |
| } | |
| .pt-page-moveFromLeft { | |
| -webkit-animation: moveFromLeft .6s ease both; | |
| -moz-animation: moveFromLeft .6s ease both; | |
| animation: moveFromLeft .6s ease both; | |
| } | |
| .pt-page-moveToRight { | |
| -webkit-animation: moveToRight .6s ease both; | |
| -moz-animation: moveToRight .6s ease both; | |
| animation: moveToRight .6s ease both; | |
| } | |
| .pt-page-moveFromRight { | |
| -webkit-animation: moveFromRight .6s ease both; | |
| -moz-animation: moveFromRight .6s ease both; | |
| animation: moveFromRight .6s ease both; | |
| } | |
| .pt-page-moveToTop { | |
| -webkit-animation: moveToTop .6s ease both; | |
| -moz-animation: moveToTop .6s ease both; | |
| animation: moveToTop .6s ease both; | |
| } | |
| .pt-page-moveFromTop { | |
| -webkit-animation: moveFromTop .6s ease both; | |
| -moz-animation: moveFromTop .6s ease both; | |
| animation: moveFromTop .6s ease both; | |
| } | |
| .pt-page-moveToBottom { | |
| -webkit-animation: moveToBottom .6s ease both; | |
| -moz-animation: moveToBottom .6s ease both; | |
| animation: moveToBottom .6s ease both; | |
| } | |
| .pt-page-moveFromBottom { | |
| -webkit-animation: moveFromBottom .6s ease both; | |
| -moz-animation: moveFromBottom .6s ease both; | |
| animation: moveFromBottom .6s ease both; | |
| } | |
| /* fade */ | |
| .pt-page-fade { | |
| -webkit-animation: fade .7s ease both; | |
| -moz-animation: fade .7s ease both; | |
| animation: fade .7s ease both; | |
| } | |
| /* move from / to and fade */ | |
| .pt-page-moveToLeftFade { | |
| -webkit-animation: moveToLeftFade .7s ease both; | |
| -moz-animation: moveToLeftFade .7s ease both; | |
| animation: moveToLeftFade .7s ease both; | |
| } | |
| .pt-page-moveFromLeftFade { | |
| -webkit-animation: moveFromLeftFade .7s ease both; | |
| -moz-animation: moveFromLeftFade .7s ease both; | |
| animation: moveFromLeftFade .7s ease both; | |
| } | |
| .pt-page-moveToRightFade { | |
| -webkit-animation: moveToRightFade .7s ease both; | |
| -moz-animation: moveToRightFade .7s ease both; | |
| animation: moveToRightFade .7s ease both; | |
| } | |
| .pt-page-moveFromRightFade { | |
| -webkit-animation: moveFromRightFade .7s ease both; | |
| -moz-animation: moveFromRightFade .7s ease both; | |
| animation: moveFromRightFade .7s ease both; | |
| } | |
| .pt-page-moveToTopFade { | |
| -webkit-animation: moveToTopFade .7s ease both; | |
| -moz-animation: moveToTopFade .7s ease both; | |
| animation: moveToTopFade .7s ease both; | |
| } | |
| .pt-page-moveFromTopFade { | |
| -webkit-animation: moveFromTopFade .7s ease both; | |
| -moz-animation: moveFromTopFade .7s ease both; | |
| animation: moveFromTopFade .7s ease both; | |
| } | |
| .pt-page-moveToBottomFade { | |
| -webkit-animation: moveToBottomFade .7s ease both; | |
| -moz-animation: moveToBottomFade .7s ease both; | |
| animation: moveToBottomFade .7s ease both; | |
| } | |
| .pt-page-moveFromBottomFade { | |
| -webkit-animation: moveFromBottomFade .7s ease both; | |
| -moz-animation: moveFromBottomFade .7s ease both; | |
| animation: moveFromBottomFade .7s ease both; | |
| } | |
| /* move to with different easing */ | |
| .pt-page-moveToLeftEasing { | |
| -webkit-animation: moveToLeft .7s ease-in-out both; | |
| -moz-animation: moveToLeft .7s ease-in-out both; | |
| animation: moveToLeft .7s ease-in-out both; | |
| } | |
| .pt-page-moveToRightEasing { | |
| -webkit-animation: moveToRight .7s ease-in-out both; | |
| -moz-animation: moveToRight .7s ease-in-out both; | |
| animation: moveToRight .7s ease-in-out both; | |
| } | |
| .pt-page-moveToTopEasing { | |
| -webkit-animation: moveToTop .7s ease-in-out both; | |
| -moz-animation: moveToTop .7s ease-in-out both; | |
| animation: moveToTop .7s ease-in-out both; | |
| } | |
| .pt-page-moveToBottomEasing { | |
| -webkit-animation: moveToBottom .7s ease-in-out both; | |
| -moz-animation: moveToBottom .7s ease-in-out both; | |
| animation: moveToBottom .7s ease-in-out both; | |
| } | |
| /********************************* keyframes **************************************/ | |
| /* move from / to */ | |
| @-webkit-keyframes moveToLeft { | |
| to { -webkit-transform: translateX(-100%); } | |
| } | |
| @-moz-keyframes moveToLeft { | |
| to { -moz-transform: translateX(-100%); } | |
| } | |
| @keyframes moveToLeft { | |
| to { transform: translateX(-100%); } | |
| } | |
| @-webkit-keyframes moveFromLeft { | |
| from { -webkit-transform: translateX(-100%); } | |
| } | |
| @-moz-keyframes moveFromLeft { | |
| from { -moz-transform: translateX(-100%); } | |
| } | |
| @keyframes moveFromLeft { | |
| from { transform: translateX(-100%); } | |
| } | |
| @-webkit-keyframes moveToRight { | |
| to { -webkit-transform: translateX(100%); } | |
| } | |
| @-moz-keyframes moveToRight { | |
| to { -moz-transform: translateX(100%); } | |
| } | |
| @keyframes moveToRight { | |
| to { transform: translateX(100%); } | |
| } | |
| @-webkit-keyframes moveFromRight { | |
| from { -webkit-transform: translateX(100%); } | |
| } | |
| @-moz-keyframes moveFromRight { | |
| from { -moz-transform: translateX(100%); } | |
| } | |
| @keyframes moveFromRight { | |
| from { transform: translateX(100%); } | |
| } | |
| @-webkit-keyframes moveToTop { | |
| to { -webkit-transform: translateY(-100%); } | |
| } | |
| @-moz-keyframes moveToTop { | |
| to { -moz-transform: translateY(-100%); } | |
| } | |
| @keyframes moveToTop { | |
| to { transform: translateY(-100%); } | |
| } | |
| @-webkit-keyframes moveFromTop { | |
| from { -webkit-transform: translateY(-100%); } | |
| } | |
| @-moz-keyframes moveFromTop { | |
| from { -moz-transform: translateY(-100%); } | |
| } | |
| @keyframes moveFromTop { | |
| from { transform: translateY(-100%); } | |
| } | |
| @-webkit-keyframes moveToBottom { | |
| to { -webkit-transform: translateY(100%); } | |
| } | |
| @-moz-keyframes moveToBottom { | |
| to { -moz-transform: translateY(100%); } | |
| } | |
| @keyframes moveToBottom { | |
| to { transform: translateY(100%); } | |
| } | |
| @-webkit-keyframes moveFromBottom { | |
| from { -webkit-transform: translateY(100%); } | |
| } | |
| @-moz-keyframes moveFromBottom { | |
| from { -moz-transform: translateY(100%); } | |
| } | |
| @keyframes moveFromBottom { | |
| from { transform: translateY(100%); } | |
| } | |
| /* fade */ | |
| @-webkit-keyframes fade { | |
| to { opacity: 0.3; } | |
| } | |
| @-moz-keyframes fade { | |
| to { opacity: 0.3; } | |
| } | |
| @keyframes fade { | |
| to { opacity: 0.3; } | |
| } | |
| /* move from / to and fade */ | |
| @-webkit-keyframes moveToLeftFade { | |
| to { opacity: 0.3; -webkit-transform: translateX(-100%); } | |
| } | |
| @-moz-keyframes moveToLeftFade { | |
| to { opacity: 0.3; -moz-transform: translateX(-100%); } | |
| } | |
| @keyframes moveToLeftFade { | |
| to { opacity: 0.3; transform: translateX(-100%); } | |
| } | |
| @-webkit-keyframes moveFromLeftFade { | |
| from { opacity: 0.3; -webkit-transform: translateX(-100%); } | |
| } | |
| @-moz-keyframes moveFromLeftFade { | |
| from { opacity: 0.3; -moz-transform: translateX(-100%); } | |
| } | |
| @keyframes moveFromLeftFade { | |
| from { opacity: 0.3; transform: translateX(-100%); } | |
| } | |
| @-webkit-keyframes moveToRightFade { | |
| to { opacity: 0.3; -webkit-transform: translateX(100%); } | |
| } | |
| @-moz-keyframes moveToRightFade { | |
| to { opacity: 0.3; -moz-transform: translateX(100%); } | |
| } | |
| @keyframes moveToRightFade { | |
| to { opacity: 0.3; transform: translateX(100%); } | |
| } | |
| @-webkit-keyframes moveFromRightFade { | |
| from { opacity: 0.3; -webkit-transform: translateX(100%); } | |
| } | |
| @-moz-keyframes moveFromRightFade { | |
| from { opacity: 0.3; -moz-transform: translateX(100%); } | |
| } | |
| @keyframes moveFromRightFade { | |
| from { opacity: 0.3; transform: translateX(100%); } | |
| } | |
| @-webkit-keyframes moveToTopFade { | |
| to { opacity: 0.3; -webkit-transform: translateY(-100%); } | |
| } | |
| @-moz-keyframes moveToTopFade { | |
| to { opacity: 0.3; -moz-transform: translateY(-100%); } | |
| } | |
| @keyframes moveToTopFade { | |
| to { opacity: 0.3; transform: translateY(-100%); } | |
| } | |
| @-webkit-keyframes moveFromTopFade { | |
| from { opacity: 0.3; -webkit-transform: translateY(-100%); } | |
| } | |
| @-moz-keyframes moveFromTopFade { | |
| from { opacity: 0.3; -moz-transform: translateY(-100%); } | |
| } | |
| @keyframes moveFromTopFade { | |
| from { opacity: 0.3; transform: translateY(-100%); } | |
| } | |
| @-webkit-keyframes moveToBottomFade { | |
| to { opacity: 0.3; -webkit-transform: translateY(100%); } | |
| } | |
| @-moz-keyframes moveToBottomFade { | |
| to { opacity: 0.3; -moz-transform: translateY(100%); } | |
| } | |
| @keyframes moveToBottomFade { | |
| to { opacity: 0.3; transform: translateY(100%); } | |
| } | |
| @-webkit-keyframes moveFromBottomFade { | |
| from { opacity: 0.3; -webkit-transform: translateY(100%); } | |
| } | |
| @-moz-keyframes moveFromBottomFade { | |
| from { opacity: 0.3; -moz-transform: translateY(100%); } | |
| } | |
| @keyframes moveFromBottomFade { | |
| from { opacity: 0.3; transform: translateY(100%); } | |
| } | |
| /* scale and fade */ | |
| .pt-page-scaleDown { | |
| -webkit-animation: scaleDown .7s ease both; | |
| -moz-animation: scaleDown .7s ease both; | |
| animation: scaleDown .7s ease both; | |
| } | |
| .pt-page-scaleUp { | |
| -webkit-animation: scaleUp .7s ease both; | |
| -moz-animation: scaleUp .7s ease both; | |
| animation: scaleUp .7s ease both; | |
| } | |
| .pt-page-scaleUpDown { | |
| -webkit-animation: scaleUpDown .5s ease both; | |
| -moz-animation: scaleUpDown .5s ease both; | |
| animation: scaleUpDown .5s ease both; | |
| } | |
| .pt-page-scaleDownUp { | |
| -webkit-animation: scaleDownUp .5s ease both; | |
| -moz-animation: scaleDownUp .5s ease both; | |
| animation: scaleDownUp .5s ease both; | |
| } | |
| .pt-page-scaleDownCenter { | |
| -webkit-animation: scaleDownCenter .4s ease-in both; | |
| -moz-animation: scaleDownCenter .4s ease-in both; | |
| animation: scaleDownCenter .4s ease-in both; | |
| } | |
| .pt-page-scaleUpCenter { | |
| -webkit-animation: scaleUpCenter .4s ease-out both; | |
| -moz-animation: scaleUpCenter .4s ease-out both; | |
| animation: scaleUpCenter .4s ease-out both; | |
| } | |
| /********************************* keyframes **************************************/ | |
| /* scale and fade */ | |
| @-webkit-keyframes scaleDown { | |
| to { opacity: 0; -webkit-transform: scale(.8); } | |
| } | |
| @-moz-keyframes scaleDown { | |
| to { opacity: 0; -moz-transform: scale(.8); } | |
| } | |
| @keyframes scaleDown { | |
| to { opacity: 0; transform: scale(.8); } | |
| } | |
| @-webkit-keyframes scaleUp { | |
| from { opacity: 0; -webkit-transform: scale(.8); } | |
| } | |
| @-moz-keyframes scaleUp { | |
| from { opacity: 0; -moz-transform: scale(.8); } | |
| } | |
| @keyframes scaleUp { | |
| from { opacity: 0; transform: scale(.8); } | |
| } | |
| @-webkit-keyframes scaleUpDown { | |
| from { opacity: 0; -webkit-transform: scale(1.2); } | |
| } | |
| @-moz-keyframes scaleUpDown { | |
| from { opacity: 0; -moz-transform: scale(1.2); } | |
| } | |
| @keyframes scaleUpDown { | |
| from { opacity: 0; transform: scale(1.2); } | |
| } | |
| @-webkit-keyframes scaleDownUp { | |
| to { opacity: 0; -webkit-transform: scale(1.2); } | |
| } | |
| @-moz-keyframes scaleDownUp { | |
| to { opacity: 0; -moz-transform: scale(1.2); } | |
| } | |
| @keyframes scaleDownUp { | |
| to { opacity: 0; transform: scale(1.2); } | |
| } | |
| @-webkit-keyframes scaleDownCenter { | |
| to { opacity: 0; -webkit-transform: scale(.7); } | |
| } | |
| @-moz-keyframes scaleDownCenter { | |
| to { opacity: 0; -moz-transform: scale(.7); } | |
| } | |
| @keyframes scaleDownCenter { | |
| to { opacity: 0; transform: scale(.7); } | |
| } | |
| @-webkit-keyframes scaleUpCenter { | |
| from { opacity: 0; -webkit-transform: scale(.7); } | |
| } | |
| @-moz-keyframes scaleUpCenter { | |
| from { opacity: 0; -moz-transform: scale(.7); } | |
| } | |
| @keyframes scaleUpCenter { | |
| from { opacity: 0; transform: scale(.7); } | |
| } | |
| /* rotate sides first and scale */ | |
| .pt-page-rotateRightSideFirst { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateRightSideFirst .8s both ease-in; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateRightSideFirst .8s both ease-in; | |
| transform-origin: 0% 50%; | |
| animation: rotateRightSideFirst .8s both ease-in; | |
| } | |
| .pt-page-rotateLeftSideFirst { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateLeftSideFirst .8s both ease-in; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateLeftSideFirst .8s both ease-in; | |
| transform-origin: 100% 50%; | |
| animation: rotateLeftSideFirst .8s both ease-in; | |
| } | |
| .pt-page-rotateTopSideFirst { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateTopSideFirst .8s both ease-in; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateTopSideFirst .8s both ease-in; | |
| transform-origin: 50% 100%; | |
| animation: rotateTopSideFirst .8s both ease-in; | |
| } | |
| .pt-page-rotateBottomSideFirst { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateBottomSideFirst .8s both ease-in; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateBottomSideFirst .8s both ease-in; | |
| transform-origin: 50% 0%; | |
| animation: rotateBottomSideFirst .8s both ease-in; | |
| } | |
| /* flip */ | |
| .pt-page-flipOutRight { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipOutRight .5s both ease-in; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipOutRight .5s both ease-in; | |
| transform-origin: 50% 50%; | |
| animation: flipOutRight .5s both ease-in; | |
| } | |
| .pt-page-flipInLeft { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipInLeft .5s both ease-out; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipInLeft .5s both ease-out; | |
| transform-origin: 50% 50%; | |
| animation: flipInLeft .5s both ease-out; | |
| } | |
| .pt-page-flipOutLeft { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipOutLeft .5s both ease-in; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipOutLeft .5s both ease-in; | |
| transform-origin: 50% 50%; | |
| animation: flipOutLeft .5s both ease-in; | |
| } | |
| .pt-page-flipInRight { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipInRight .5s both ease-out; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipInRight .5s both ease-out; | |
| transform-origin: 50% 50%; | |
| animation: flipInRight .5s both ease-out; | |
| } | |
| .pt-page-flipOutTop { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipOutTop .5s both ease-in; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipOutTop .5s both ease-in; | |
| transform-origin: 50% 50%; | |
| animation: flipOutTop .5s both ease-in; | |
| } | |
| .pt-page-flipInBottom { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipInBottom .5s both ease-out; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipInBottom .5s both ease-out; | |
| transform-origin: 50% 50%; | |
| animation: flipInBottom .5s both ease-out; | |
| } | |
| .pt-page-flipOutBottom { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipOutBottom .5s both ease-in; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipOutBottom .5s both ease-in; | |
| transform-origin: 50% 50%; | |
| animation: flipOutBottom .5s both ease-in; | |
| } | |
| .pt-page-flipInTop { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: flipInTop .5s both ease-out; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: flipInTop .5s both ease-out; | |
| transform-origin: 50% 50%; | |
| animation: flipInTop .5s both ease-out; | |
| } | |
| /* rotate fall */ | |
| .pt-page-rotateFall { | |
| -webkit-transform-origin: 0% 0%; | |
| -webkit-animation: rotateFall 1s both ease-in; | |
| -moz-transform-origin: 0% 0%; | |
| -moz-animation: rotateFall 1s both ease-in; | |
| transform-origin: 0% 0%; | |
| animation: rotateFall 1s both ease-in; | |
| } | |
| /* rotate newspaper */ | |
| .pt-page-rotateOutNewspaper { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: rotateOutNewspaper .5s both ease-in; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: rotateOutNewspaper .5s both ease-in; | |
| transform-origin: 50% 50%; | |
| animation: rotateOutNewspaper .5s both ease-in; | |
| } | |
| .pt-page-rotateInNewspaper { | |
| -webkit-transform-origin: 50% 50%; | |
| -webkit-animation: rotateInNewspaper .5s both ease-out; | |
| -moz-transform-origin: 50% 50%; | |
| -moz-animation: rotateInNewspaper .5s both ease-out; | |
| transform-origin: 50% 50%; | |
| animation: rotateInNewspaper .5s both ease-out; | |
| } | |
| /* push */ | |
| .pt-page-rotatePushLeft { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotatePushLeft .8s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotatePushLeft .8s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotatePushLeft .8s both ease; | |
| } | |
| .pt-page-rotatePushRight { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotatePushRight .8s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotatePushRight .8s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotatePushRight .8s both ease; | |
| } | |
| .pt-page-rotatePushTop { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotatePushTop .8s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotatePushTop .8s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotatePushTop .8s both ease; | |
| } | |
| .pt-page-rotatePushBottom { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotatePushBottom .8s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotatePushBottom .8s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotatePushBottom .8s both ease; | |
| } | |
| /* pull */ | |
| .pt-page-rotatePullRight { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotatePullRight .5s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotatePullRight .5s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotatePullRight .5s both ease; | |
| } | |
| .pt-page-rotatePullLeft { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotatePullLeft .5s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotatePullLeft .5s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotatePullLeft .5s both ease; | |
| } | |
| .pt-page-rotatePullTop { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotatePullTop .5s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotatePullTop .5s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotatePullTop .5s both ease; | |
| } | |
| .pt-page-rotatePullBottom { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotatePullBottom .5s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotatePullBottom .5s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotatePullBottom .5s both ease; | |
| } | |
| /* fold */ | |
| .pt-page-rotateFoldRight { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateFoldRight .7s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateFoldRight .7s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateFoldRight .7s both ease; | |
| } | |
| .pt-page-rotateFoldLeft { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateFoldLeft .7s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateFoldLeft .7s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateFoldLeft .7s both ease; | |
| } | |
| .pt-page-rotateFoldTop { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateFoldTop .7s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateFoldTop .7s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateFoldTop .7s both ease; | |
| } | |
| .pt-page-rotateFoldBottom { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateFoldBottom .7s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateFoldBottom .7s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateFoldBottom .7s both ease; | |
| } | |
| /* unfold */ | |
| .pt-page-rotateUnfoldLeft { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateUnfoldLeft .7s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateUnfoldLeft .7s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateUnfoldLeft .7s both ease; | |
| } | |
| .pt-page-rotateUnfoldRight { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateUnfoldRight .7s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateUnfoldRight .7s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateUnfoldRight .7s both ease; | |
| } | |
| .pt-page-rotateUnfoldTop { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateUnfoldTop .7s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateUnfoldTop .7s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateUnfoldTop .7s both ease; | |
| } | |
| .pt-page-rotateUnfoldBottom { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateUnfoldBottom .7s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateUnfoldBottom .7s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateUnfoldBottom .7s both ease; | |
| } | |
| /* room walls */ | |
| .pt-page-rotateRoomLeftOut { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateRoomLeftOut .8s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateRoomLeftOut .8s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateRoomLeftOut .8s both ease; | |
| } | |
| .pt-page-rotateRoomLeftIn { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateRoomLeftIn .8s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateRoomLeftIn .8s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateRoomLeftIn .8s both ease; | |
| } | |
| .pt-page-rotateRoomRightOut { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateRoomRightOut .8s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateRoomRightOut .8s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateRoomRightOut .8s both ease; | |
| } | |
| .pt-page-rotateRoomRightIn { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateRoomRightIn .8s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateRoomRightIn .8s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateRoomRightIn .8s both ease; | |
| } | |
| .pt-page-rotateRoomTopOut { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateRoomTopOut .8s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateRoomTopOut .8s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateRoomTopOut .8s both ease; | |
| } | |
| .pt-page-rotateRoomTopIn { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateRoomTopIn .8s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateRoomTopIn .8s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateRoomTopIn .8s both ease; | |
| } | |
| .pt-page-rotateRoomBottomOut { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateRoomBottomOut .8s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateRoomBottomOut .8s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateRoomBottomOut .8s both ease; | |
| } | |
| .pt-page-rotateRoomBottomIn { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateRoomBottomIn .8s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateRoomBottomIn .8s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateRoomBottomIn .8s both ease; | |
| } | |
| /* cube */ | |
| .pt-page-rotateCubeLeftOut { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateCubeLeftOut .6s both ease-in; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateCubeLeftOut .6s both ease-in; | |
| transform-origin: 100% 50%; | |
| animation: rotateCubeLeftOut .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeLeftIn { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateCubeLeftIn .6s both ease-in; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateCubeLeftIn .6s both ease-in; | |
| transform-origin: 0% 50%; | |
| animation: rotateCubeLeftIn .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeRightOut { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateCubeRightOut .6s both ease-in; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateCubeRightOut .6s both ease-in; | |
| transform-origin: 0% 50%; | |
| animation: rotateCubeRightOut .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeRightIn { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateCubeRightIn .6s both ease-in; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateCubeRightIn .6s both ease-in; | |
| transform-origin: 100% 50%; | |
| animation: rotateCubeRightIn .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeTopOut { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateCubeTopOut .6s both ease-in; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateCubeTopOut .6s both ease-in; | |
| transform-origin: 50% 100%; | |
| animation: rotateCubeTopOut .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeTopIn { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateCubeTopIn .6s both ease-in; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateCubeTopIn .6s both ease-in; | |
| transform-origin: 50% 0%; | |
| animation: rotateCubeTopIn .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeBottomOut { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateCubeBottomOut .6s both ease-in; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateCubeBottomOut .6s both ease-in; | |
| transform-origin: 50% 0%; | |
| animation: rotateCubeBottomOut .6s both ease-in; | |
| } | |
| .pt-page-rotateCubeBottomIn { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateCubeBottomIn .6s both ease-in; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateCubeBottomIn .6s both ease-in; | |
| transform-origin: 50% 100%; | |
| animation: rotateCubeBottomIn .6s both ease-in; | |
| } | |
| /* carousel */ | |
| .pt-page-rotateCarouselLeftOut { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateCarouselLeftOut .8s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateCarouselLeftOut .8s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateCarouselLeftOut .8s both ease; | |
| } | |
| .pt-page-rotateCarouselLeftIn { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateCarouselLeftIn .8s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateCarouselLeftIn .8s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateCarouselLeftIn .8s both ease; | |
| } | |
| .pt-page-rotateCarouselRightOut { | |
| -webkit-transform-origin: 0% 50%; | |
| -webkit-animation: rotateCarouselRightOut .8s both ease; | |
| -moz-transform-origin: 0% 50%; | |
| -moz-animation: rotateCarouselRightOut .8s both ease; | |
| transform-origin: 0% 50%; | |
| animation: rotateCarouselRightOut .8s both ease; | |
| } | |
| .pt-page-rotateCarouselRightIn { | |
| -webkit-transform-origin: 100% 50%; | |
| -webkit-animation: rotateCarouselRightIn .8s both ease; | |
| -moz-transform-origin: 100% 50%; | |
| -moz-animation: rotateCarouselRightIn .8s both ease; | |
| transform-origin: 100% 50%; | |
| animation: rotateCarouselRightIn .8s both ease; | |
| } | |
| .pt-page-rotateCarouselTopOut { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateCarouselTopOut .8s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateCarouselTopOut .8s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateCarouselTopOut .8s both ease; | |
| } | |
| .pt-page-rotateCarouselTopIn { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateCarouselTopIn .8s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateCarouselTopIn .8s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateCarouselTopIn .8s both ease; | |
| } | |
| .pt-page-rotateCarouselBottomOut { | |
| -webkit-transform-origin: 50% 0%; | |
| -webkit-animation: rotateCarouselBottomOut .8s both ease; | |
| -moz-transform-origin: 50% 0%; | |
| -moz-animation: rotateCarouselBottomOut .8s both ease; | |
| transform-origin: 50% 0%; | |
| animation: rotateCarouselBottomOut .8s both ease; | |
| } | |
| .pt-page-rotateCarouselBottomIn { | |
| -webkit-transform-origin: 50% 100%; | |
| -webkit-animation: rotateCarouselBottomIn .8s both ease; | |
| -moz-transform-origin: 50% 100%; | |
| -moz-animation: rotateCarouselBottomIn .8s both ease; | |
| transform-origin: 50% 100%; | |
| animation: rotateCarouselBottomIn .8s both ease; | |
| } | |
| /* sides */ | |
| .pt-page-rotateSidesOut { | |
| -webkit-transform-origin: -50% 50%; | |
| -webkit-animation: rotateSidesOut .5s both ease-in; | |
| -moz-transform-origin: -50% 50%; | |
| -moz-animation: rotateSidesOut .5s both ease-in; | |
| transform-origin: -50% 50%; | |
| animation: rotateSidesOut .5s both ease-in; | |
| } | |
| .pt-page-rotateSidesIn { | |
| -webkit-transform-origin: 150% 50%; | |
| -webkit-animation: rotateSidesIn .5s both ease-out; | |
| -moz-transform-origin: 150% 50%; | |
| -moz-animation: rotateSidesIn .5s both ease-out; | |
| transform-origin: 150% 50%; | |
| animation: rotateSidesIn .5s both ease-out; | |
| } | |
| /* slide */ | |
| .pt-page-rotateSlideOut { | |
| -webkit-animation: rotateSlideOut 1s both ease; | |
| -moz-animation: rotateSlideOut 1s both ease; | |
| animation: rotateSlideOut 1s both ease; | |
| } | |
| .pt-page-rotateSlideIn { | |
| -webkit-animation: rotateSlideIn 1s both ease; | |
| -moz-animation: rotateSlideIn 1s both ease; | |
| animation: rotateSlideIn 1s both ease; | |
| } | |
| /********************************* keyframes **************************************/ | |
| /* rotate sides first and scale */ | |
| @-webkit-keyframes rotateRightSideFirst { | |
| 40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } | |
| 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-moz-keyframes rotateRightSideFirst { | |
| 40% { -moz-transform: rotateY(15deg); opacity: .8; -moz-animation-timing-function: ease-out; } | |
| 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @keyframes rotateRightSideFirst { | |
| 40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; } | |
| 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-webkit-keyframes rotateLeftSideFirst { | |
| 40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } | |
| 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-moz-keyframes rotateLeftSideFirst { | |
| 40% { -moz-transform: rotateY(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; } | |
| 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @keyframes rotateLeftSideFirst { | |
| 40% { transform: rotateY(-15deg); opacity: .8; animation-timing-function: ease-out; } | |
| 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-webkit-keyframes rotateTopSideFirst { | |
| 40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } | |
| 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-moz-keyframes rotateTopSideFirst { | |
| 40% { -moz-transform: rotateX(15deg); opacity: .8; -moz-animation-timing-function: ease-out; } | |
| 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @keyframes rotateTopSideFirst { | |
| 40% { transform: rotateX(15deg); opacity: .8; animation-timing-function: ease-out; } | |
| 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-webkit-keyframes rotateBottomSideFirst { | |
| 40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } | |
| 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @-moz-keyframes rotateBottomSideFirst { | |
| 40% { -moz-transform: rotateX(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; } | |
| 100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| @keyframes rotateBottomSideFirst { | |
| 40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; } | |
| 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } | |
| } | |
| /* flip */ | |
| @-webkit-keyframes flipOutRight { | |
| to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipOutRight { | |
| to { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipOutRight { | |
| to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipInLeft { | |
| from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipInLeft { | |
| from { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipInLeft { | |
| from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipOutLeft { | |
| to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipOutLeft { | |
| to { -moz-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipOutLeft { | |
| to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipInRight { | |
| from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipInRight { | |
| from { -moz-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipInRight { | |
| from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipOutTop { | |
| to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipOutTop { | |
| to { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipOutTop { | |
| to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipInBottom { | |
| from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipInBottom { | |
| from { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipInBottom { | |
| from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipOutBottom { | |
| to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipOutBottom { | |
| to { -moz-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipOutBottom { | |
| to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } | |
| } | |
| @-webkit-keyframes flipInTop { | |
| from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| @-moz-keyframes flipInTop { | |
| from { -moz-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| @keyframes flipInTop { | |
| from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } | |
| } | |
| /* fall */ | |
| @-webkit-keyframes rotateFall { | |
| 0% { -webkit-transform: rotateZ(0deg); } | |
| 20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; } | |
| 40% { -webkit-transform: rotateZ(17deg); } | |
| 60% { -webkit-transform: rotateZ(16deg); } | |
| 100% { -webkit-transform: translateY(100%) rotateZ(17deg); } | |
| } | |
| @-moz-keyframes rotateFall { | |
| 0% { -moz-transform: rotateZ(0deg); } | |
| 20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; } | |
| 40% { -moz-transform: rotateZ(17deg); } | |
| 60% { -moz-transform: rotateZ(16deg); } | |
| 100% { -moz-transform: translateY(100%) rotateZ(17deg); } | |
| } | |
| @keyframes rotateFall { | |
| 0% { transform: rotateZ(0deg); } | |
| 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } | |
| 40% { transform: rotateZ(17deg); } | |
| 60% { transform: rotateZ(16deg); } | |
| 100% { transform: translateY(100%) rotateZ(17deg); } | |
| } | |
| /* newspaper */ | |
| @-webkit-keyframes rotateOutNewspaper { | |
| to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } | |
| } | |
| @-moz-keyframes rotateOutNewspaper { | |
| to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } | |
| } | |
| @keyframes rotateOutNewspaper { | |
| to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } | |
| } | |
| @-webkit-keyframes rotateInNewspaper { | |
| from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } | |
| } | |
| @-moz-keyframes rotateInNewspaper { | |
| from { -moz-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } | |
| } | |
| @keyframes rotateInNewspaper { | |
| from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } | |
| } | |
| /* push */ | |
| @-webkit-keyframes rotatePushLeft { | |
| to { opacity: 0; -webkit-transform: rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotatePushLeft { | |
| to { opacity: 0; -moz-transform: rotateY(90deg); } | |
| } | |
| @keyframes rotatePushLeft { | |
| to { opacity: 0; transform: rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotatePushRight { | |
| to { opacity: 0; -webkit-transform: rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotatePushRight { | |
| to { opacity: 0; -moz-transform: rotateY(-90deg); } | |
| } | |
| @keyframes rotatePushRight { | |
| to { opacity: 0; transform: rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotatePushTop { | |
| to { opacity: 0; -webkit-transform: rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotatePushTop { | |
| to { opacity: 0; -moz-transform: rotateX(-90deg); } | |
| } | |
| @keyframes rotatePushTop { | |
| to { opacity: 0; transform: rotateX(-90deg); } | |
| } | |
| @-webkit-keyframes rotatePushBottom { | |
| to { opacity: 0; -webkit-transform: rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotatePushBottom { | |
| to { opacity: 0; -moz-transform: rotateX(90deg); } | |
| } | |
| @keyframes rotatePushBottom { | |
| to { opacity: 0; transform: rotateX(90deg); } | |
| } | |
| /* pull */ | |
| @-webkit-keyframes rotatePullRight { | |
| from { opacity: 0; -webkit-transform: rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotatePullRight { | |
| from { opacity: 0; -moz-transform: rotateY(-90deg); } | |
| } | |
| @keyframes rotatePullRight { | |
| from { opacity: 0; transform: rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotatePullLeft { | |
| from { opacity: 0; -webkit-transform: rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotatePullLeft { | |
| from { opacity: 0; -moz-transform: rotateY(90deg); } | |
| } | |
| @keyframes rotatePullLeft { | |
| from { opacity: 0; transform: rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotatePullTop { | |
| from { opacity: 0; -webkit-transform: rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotatePullTop { | |
| from { opacity: 0; -moz-transform: rotateX(-90deg); } | |
| } | |
| @keyframes rotatePullTop { | |
| from { opacity: 0; transform: rotateX(-90deg); } | |
| } | |
| @-webkit-keyframes rotatePullBottom { | |
| from { opacity: 0; -webkit-transform: rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotatePullBottom { | |
| from { opacity: 0; -moz-transform: rotateX(90deg); } | |
| } | |
| @keyframes rotatePullBottom { | |
| from { opacity: 0; transform: rotateX(90deg); } | |
| } | |
| /* fold */ | |
| @-webkit-keyframes rotateFoldRight { | |
| to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateFoldRight { | |
| to { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @keyframes rotateFoldRight { | |
| to { opacity: 0; transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateFoldLeft { | |
| to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateFoldLeft { | |
| to { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @keyframes rotateFoldLeft { | |
| to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotateFoldTop { | |
| to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotateFoldTop { | |
| to { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @keyframes rotateFoldTop { | |
| to { opacity: 0; transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-webkit-keyframes rotateFoldBottom { | |
| to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotateFoldBottom { | |
| to { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @keyframes rotateFoldBottom { | |
| to { opacity: 0; transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| /* unfold */ | |
| @-webkit-keyframes rotateUnfoldLeft { | |
| from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateUnfoldLeft { | |
| from { opacity: 0; -moz-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @keyframes rotateUnfoldLeft { | |
| from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotateUnfoldRight { | |
| from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateUnfoldRight { | |
| from { opacity: 0; -moz-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @keyframes rotateUnfoldRight { | |
| from { opacity: 0; transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateUnfoldTop { | |
| from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotateUnfoldTop { | |
| from { opacity: 0; -moz-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @keyframes rotateUnfoldTop { | |
| from { opacity: 0; transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-webkit-keyframes rotateUnfoldBottom { | |
| from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotateUnfoldBottom { | |
| from { opacity: 0; -moz-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @keyframes rotateUnfoldBottom { | |
| from { opacity: 0; transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| /* room walls */ | |
| @-webkit-keyframes rotateRoomLeftOut { | |
| to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateRoomLeftOut { | |
| to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @keyframes rotateRoomLeftOut { | |
| to { opacity: .3; transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomLeftIn { | |
| from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateRoomLeftIn { | |
| from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @keyframes rotateRoomLeftIn { | |
| from { opacity: .3; transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomRightOut { | |
| to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateRoomRightOut { | |
| to { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @keyframes rotateRoomRightOut { | |
| to { opacity: .3; transform: translateX(100%) rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomRightIn { | |
| from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateRoomRightIn { | |
| from { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @keyframes rotateRoomRightIn { | |
| from { opacity: .3; transform: translateX(-100%) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomTopOut { | |
| to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotateRoomTopOut { | |
| to { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| @keyframes rotateRoomTopOut { | |
| to { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomTopIn { | |
| from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotateRoomTopIn { | |
| from { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @keyframes rotateRoomTopIn { | |
| from { opacity: .3; transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomBottomOut { | |
| to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotateRoomBottomOut { | |
| to { opacity: .3; -moz-transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @keyframes rotateRoomBottomOut { | |
| to { opacity: .3; transform: translateY(100%) rotateX(90deg); } | |
| } | |
| @-webkit-keyframes rotateRoomBottomIn { | |
| from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotateRoomBottomIn { | |
| from { opacity: .3; -moz-transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| @keyframes rotateRoomBottomIn { | |
| from { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } | |
| } | |
| /* cube */ | |
| @-webkit-keyframes rotateCubeLeftOut { | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| 100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateCubeLeftOut { | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| 100% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @keyframes rotateCubeLeftOut { | |
| 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| 100% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); } | |
| } | |
| @-webkit-keyframes rotateCubeLeftIn { | |
| 0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); } | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| } | |
| @-moz-keyframes rotateCubeLeftIn { | |
| 0% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); } | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| } | |
| @keyframes rotateCubeLeftIn { | |
| 0% { opacity: .3; transform: translateX(100%) rotateY(90deg); } | |
| 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| } | |
| @-webkit-keyframes rotateCubeRightOut { | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| 100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateCubeRightOut { | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| 100% { opacity: .3; -moz-transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @keyframes rotateCubeRightOut { | |
| 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } | |
| 100% { opacity: .3; transform: translateX(100%) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateCubeRightIn { | |
| 0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); } | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| } | |
| @-moz-keyframes rotateCubeRightIn { | |
| 0% { opacity: .3; -moz-transform: translateX(-100%) rotateY(-90deg); } | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| } | |
| @keyframes rotateCubeRightIn { | |
| 0% { opacity: .3; transform: translateX(-100%) rotateY(-90deg); } | |
| 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } | |
| } | |
| @-webkit-keyframes rotateCubeTopOut { | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| 100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-moz-keyframes rotateCubeTopOut { | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| 100% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @keyframes rotateCubeTopOut { | |
| 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| 100% { opacity: .3; transform: translateY(-100%) rotateX(90deg); } | |
| } | |
| @-webkit-keyframes rotateCubeTopIn { | |
| 0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); } | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| } | |
| @-moz-keyframes rotateCubeTopIn { | |
| 0% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); } | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| } | |
| @keyframes rotateCubeTopIn { | |
| 0% { opacity: .3; transform: translateY(100%) rotateX(-90deg); } | |
| 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| } | |
| @-webkit-keyframes rotateCubeBottomOut { | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| 100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @-moz-keyframes rotateCubeBottomOut { | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| 100% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @keyframes rotateCubeBottomOut { | |
| 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } | |
| 100% { opacity: .3; transform: translateY(100%) rotateX(-90deg); } | |
| } | |
| @-webkit-keyframes rotateCubeBottomIn { | |
| 0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); } | |
| 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| } | |
| @-moz-keyframes rotateCubeBottomIn { | |
| 0% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); } | |
| 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| } | |
| @keyframes rotateCubeBottomIn { | |
| 0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); } | |
| 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } | |
| } | |
| /* carousel */ | |
| @-webkit-keyframes rotateCarouselLeftOut { | |
| to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselLeftOut { | |
| to { opacity: .3; -moz-transform: translateX(-150%) scale(.4) rotateY(-65deg); } | |
| } | |
| @keyframes rotateCarouselLeftOut { | |
| to { opacity: .3; transform: translateX(-150%) scale(.4) rotateY(-65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselLeftIn { | |
| from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselLeftIn { | |
| from { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @keyframes rotateCarouselLeftIn { | |
| from { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselRightOut { | |
| to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselRightOut { | |
| to { opacity: .3; -moz-transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @keyframes rotateCarouselRightOut { | |
| to { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselRightIn { | |
| from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselRightIn { | |
| from { opacity: .3; -moz-transform: translateX(-200%) scale(.4) rotateY(-65deg); } | |
| } | |
| @keyframes rotateCarouselRightIn { | |
| from { opacity: .3; transform: translateX(-200%) scale(.4) rotateY(-65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselTopOut { | |
| to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselTopOut { | |
| to { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| @keyframes rotateCarouselTopOut { | |
| to { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselTopIn { | |
| from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselTopIn { | |
| from { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @keyframes rotateCarouselTopIn { | |
| from { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselBottomOut { | |
| to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselBottomOut { | |
| to { opacity: .3; -moz-transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @keyframes rotateCarouselBottomOut { | |
| to { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } | |
| } | |
| @-webkit-keyframes rotateCarouselBottomIn { | |
| from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| @-moz-keyframes rotateCarouselBottomIn { | |
| from { opacity: .3; -moz-transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| @keyframes rotateCarouselBottomIn { | |
| from { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } | |
| } | |
| /* sides */ | |
| @-webkit-keyframes rotateSidesOut { | |
| to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); } | |
| } | |
| @-moz-keyframes rotateSidesOut { | |
| to { opacity: 0; -moz-transform: translateZ(-500px) rotateY(90deg); } | |
| } | |
| @keyframes rotateSidesOut { | |
| to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } | |
| } | |
| @-webkit-keyframes rotateSidesIn { | |
| from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); } | |
| } | |
| @-moz-keyframes rotateSidesIn { | |
| from { opacity: 0; -moz-transform: translateZ(-500px) rotateY(-90deg); } | |
| } | |
| @keyframes rotateSidesIn { | |
| from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } | |
| } | |
| /* slide */ | |
| @-webkit-keyframes rotateSlideOut { | |
| 25% { opacity: .5; -webkit-transform: translateZ(-500px); } | |
| 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } | |
| 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } | |
| } | |
| @-moz-keyframes rotateSlideOut { | |
| 25% { opacity: .5; -moz-transform: translateZ(-500px); } | |
| 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } | |
| 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } | |
| } | |
| @keyframes rotateSlideOut { | |
| 25% { opacity: .5; transform: translateZ(-500px); } | |
| 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } | |
| 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } | |
| } | |
| @-webkit-keyframes rotateSlideIn { | |
| 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } | |
| 75% { opacity: .5; -webkit-transform: translateZ(-500px); } | |
| 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } | |
| } | |
| @-moz-keyframes rotateSlideIn { | |
| 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } | |
| 75% { opacity: .5; -moz-transform: translateZ(-500px); } | |
| 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } | |
| } | |
| @keyframes rotateSlideIn { | |
| 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } | |
| 75% { opacity: .5; transform: translateZ(-500px); } | |
| 100% { opacity: 1; transform: translateZ(0) translateX(0); } | |
| } | |
| /* animation delay classes */ | |
| .pt-page-delay100 { | |
| -webkit-animation-delay: .1s; | |
| -moz-animation-delay: .1s; | |
| animation-delay: .1s; | |
| } | |
| .pt-page-delay180 { | |
| -webkit-animation-delay: .180s; | |
| -moz-animation-delay: .180s; | |
| animation-delay: .180s; | |
| } | |
| .pt-page-delay200 { | |
| -webkit-animation-delay: .2s; | |
| -moz-animation-delay: .2s; | |
| animation-delay: .2s; | |
| } | |
| .pt-page-delay300 { | |
| -webkit-animation-delay: .3s; | |
| -moz-animation-delay: .3s; | |
| animation-delay: .3s; | |
| } | |
| .pt-page-delay400 { | |
| -webkit-animation-delay: .4s; | |
| -moz-animation-delay: .4s; | |
| animation-delay: .4s; | |
| } | |
| .pt-page-delay500 { | |
| -webkit-animation-delay: .5s; | |
| -moz-animation-delay: .5s; | |
| animation-delay: .5s; | |
| } | |
| .pt-page-delay700 { | |
| -webkit-animation-delay: .7s; | |
| -moz-animation-delay: .7s; | |
| animation-delay: .7s; | |
| } | |
| .pt-page-delay1000 { | |
| -webkit-animation-delay: 1s; | |
| -moz-animation-delay: 1s; | |
| animation-delay: 1s; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment