home/wuectly/www/modules/mod_favpromote/theme/css/favpromote.css000060400000060727152456171700021313 0ustar00/* * name FavPromote * version 1.7 * description Responsive and customizable Joomla!3 module * demo http://extensions.favthemes.com/favpromote * author FavThemes * author URL http://www.favthemes.com * copyright Copyright (C) 2015 FavThemes.com. All Rights Reserved. * license Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html */ /* ****************************************************************************************** 1. reset 2. layout 3. content 4. grid 5. layout effects ****************************************************************************************** */ /* ****************************************************************************************** /// favpromote css ****************************************************************************************** */ /* ///////////////////////////////// 1. reset ///////////////////////////////// */ div[id^="favpromote"] a, div[id*=" favpromote"] a, div[id^="favpromote"] a:hover, div[id*=" favpromote"] a:hover, div[id^="favpromote"] a:focus, div[id*=" favpromote"] a:focus { text-decoration: none!important; } /* ///////////////////////////////// 2. layout ///////////////////////////////// */ div[id^="favpromote-box"], div[id*=" favpromote-box"] { position: relative; overflow: hidden; margin-bottom: 14px; margin-top: 14px; } div[id^="favpromote-box"]:hover, div[id*=" favpromote-box"]:hover, div[id^="favpromote-box"]:focus, div[id*=" favpromote-box"]:focus { color: #fff; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; } /* ///////////////////////////////// 3. content ///////////////////////////////// */ /* /// image */ div[id^="favpromote-image"], div[id*=" favpromote-image"] { padding: 21px; } div[id^="favpromote-image"] img, div[id*=" favpromote-image"] img { border: 1px solid #ddd; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05); width: 100%; } div[id^="favpromote-image"] img:hover, div[id*=" favpromote-image"] img:hover { border: 1px solid #fff; } /* /// title */ div[id^="favpromote-box"] h4, div[id*=" favpromote-box"] h4 { font-weight: normal; } div[id^="favpromote-box"]:hover h4[id^="favpromote-title"], div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"], div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"], div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"], div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] a, div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] a, div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"] a, div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"] a, div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] i, div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] i, div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"] i, div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"] i { background-color: #111!important; color: #fff!important; } div[id^="favpromote-box"]:hover h4[id^="favpromote-title"], div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] { font-weight: normal; } div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] a:hover, div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] a:hover { text-decoration: none; } div[id^="favpromote"] div[id^="favpromote-title"] a, div[id*=" favpromote"] div[id^="favpromote-title"] a, div[id^="favpromote"] div[id*=" favpromote-title"] a, div[id*=" favpromote"] div[id*=" favpromote-title"] a { vertical-align: middle; } div[id^="favpromote"] div[id^="favpromote-title"] a:hover, div[id*=" favpromote"] div[id^="favpromote-title"] a:hover, div[id^="favpromote"] div[id*=" favpromote-title"] a:hover, div[id*=" favpromote"] div[id*=" favpromote-title"] a:hover { color: #fff!important; } /* /// description */ p[id^="favpromote-text"], p[id*=" favpromote-text"] { padding: 4px 21px 14px; margin: 0; } div[id^="favpromote-box"]:hover p[id^="favpromote-text"], div[id*=" favpromote-box"]:hover p[id^="favpromote-text"], div[id^="favpromote-box"]:hover p[id*=" favpromote-text"], div[id*=" favpromote-box"]:hover p[id*=" favpromote-text"] { color: #fff!important; } /* ///////////////////////////////// 4. grid ///////////////////////////////// */ @media (min-width: 980px) { /* /// 6 columns */ div[id^="favpromote-box"].span2 h4, div[id*=" favpromote-box"].span2 h4 { font-size: 14px; } div[id^="favpromote-box"].span2 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span2 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span2 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span2 div[id*=" favpromote-description-icon"] i { font-size: 1.2em; } div[id^="favpromote-box"].span2 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span2 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span2 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span2 div[id*=" favpromote-icon"] i { font-size: 3.3em; } /* /// 5 columns */ div[id^="favpromote-box"].span2-4, div[id*=" favpromote-box"].span2-4 { width: 17.790056%; } div[id^="favpromote-box"].span2-4 h4, div[id*=" favpromote-box"].span2-4 h4 { font-size: 16px; } div[id^="favpromote-box"].span2-4 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span2-4 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span2-4 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span2-4 div[id*=" favpromote-description-icon"] i { font-size: 1.4em; } div[id^="favpromote-box"].span2-4 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span2-4 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span2-4 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span2-4 div[id*=" favpromote-icon"] i { font-size: 4em; } /* /// 4 columns */ div[id^="favpromote-box"].span3 h4, div[id*=" favpromote-box"].span3 h4 { font-size: 18px; } div[id^="favpromote-box"].span3 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span3 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span3 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span3 div[id*=" favpromote-description-icon"] i { font-size: 1.8em; } div[id^="favpromote-box"].span3 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span3 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span3 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span3 div[id*=" favpromote-icon"] i { font-size: 5em; } /* /// 3 columns */ div[id^="favpromote-box"].span4 h4, div[id*=" favpromote-box"].span4 h4 { font-size: 24px; } div[id^="favpromote-box"].span4 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span4 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span4 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span4 div[id*=" favpromote-description-icon"] i { font-size: 2em; } div[id^="favpromote-box"].span4 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span4 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span4 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span4 div[id*=" favpromote-icon"] i { font-size: 8em; } /* /// 2 columns */ div[id^="favpromote-box"].span6 h4, div[id*=" favpromote-box"].span6 h4 { font-size: 28px; } div[id^="favpromote-box"].span6 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span6 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span6 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span6 div[id*=" favpromote-description-icon"] i { font-size: 2.4em; } div[id^="favpromote-box"].span6 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span6 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span6 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span6 div[id*=" favpromote-icon"] i { font-size: 12em; } /* /// 1 columns */ div[id^="favpromote-box"].span12 h4, div[id*=" favpromote-box"].span12 h4 { font-size: 32px; } div[id^="favpromote-box"].span12 div[id^="favpromote-description-icon"] i, div[id*=" favpromote-box"].span12 div[id^="favpromote-description-icon"] i, div[id^="favpromote-box"].span12 div[id*=" favpromote-description-icon"] i, div[id*=" favpromote-box"].span12 div[id*=" favpromote-description-icon"] i { font-size: 5em; } div[id^="favpromote-box"].span12 div[id^="favpromote-icon"] i, div[id*=" favpromote-box"].span12 div[id^="favpromote-icon"] i, div[id^="favpromote-box"].span12 div[id*=" favpromote-icon"] i, div[id*=" favpromote-box"].span12 div[id*=" favpromote-icon"] i { font-size: 20em; } } @media handheld, only screen and (max-width: 979px) { div[id^="favpromote-box"], div[id*=" favpromote-box"] { margin-bottom: 21px; } div[id^="favpromote-icon"] i, div[id*=" favpromote-icon"] i { font-size: 8em; } div[id^="favpromote-box"].span2, div[id*=" favpromote-box"].span2, div[id^="favpromote-box"].span2-4, div[id*=" favpromote-box"].span2-4, div[id^="favpromote-box"].span3, div[id*=" favpromote-box"].span3, div[id^="favpromote-box"].span4, div[id*=" favpromote-box"].span4, div[id^="favpromote-box"].span6, div[id*=" favpromote-box"].span6 { margin-left: 2.127659574468085%; float:left; } div[id^="favpromote-box"].span2, div[id*=" favpromote-box"].span2, div[id^="favpromote-box"].span2-4, div[id*=" favpromote-box"].span2-4, div[id^="favpromote-box"].span4, div[id*=" favpromote-box"].span4 { width: 31.6239%; } div[id^="favpromote-box"].span2:first-child, div[id*=" favpromote-box"].span2:first-child, div[id^="favpromote-box"].span2-4:first-child, div[id*=" favpromote-box"].span2-4:first-child, div[id^="favpromote-box"].span4:first-child, div[id*=" favpromote-box"].span4:first-child, div[id^="favpromote-box"].span6:first-child, div[id*=" favpromote-box"].span6:first-child { margin-left: 0; } div[id^="favpromote-box"].span2:nth-child(4), div[id*=" favpromote-box"].span2:nth-child(4), div[id^="favpromote-box"].span2-4:nth-child(4), div[id*=" favpromote-box"].span2-4:nth-child(4) { margin-left: 0; clear: both; } div[id^="favpromote-box"].span2-4:nth-child(4), div[id*=" favpromote-box"].span2-4:nth-child(4), div[id^="favpromote-box"].span2-4:nth-child(5), div[id*=" favpromote-box"].span2-4:nth-child(5) { width: 48.93617021276595%; } } @media handheld, only screen and (max-width: 767px) { div[id^="favpromote-icon"] i, div[id*=" favpromote-icon"] i { font-size: 6em; } div[id^="favpromote-box"].span3, div[id*=" favpromote-box"].span3 { margin-left: 2.127659574468085%; float:left; } div[id^="favpromote-box"].span3:first-child, div[id*=" favpromote-box"].span3:first-child { margin-left: 0; } div[id^="favpromote-box"].span3:nth-child(4) div[id*=" favpromote-box"].span3:nth-child(4) { margin-left: 0; clear: both; } /* columns into 2 rows */ div[id^="favpromote-box"].span2, div[id*=" favpromote-box"].span2, div[id^="favpromote-box"].span2-4, div[id*=" favpromote-box"].span2-4, div[id^="favpromote-box"].span3, div[id*=" favpromote-box"].span3, div[id^="favpromote-box"].span4, div[id*=" favpromote-box"].span4, div[id^="favpromote-box"].span6, div[id*=" favpromote-box"].span6 { width: 48.93617021276595%; } div[id^="favpromote-box"].span2:nth-child(3), div[id*=" favpromote-box"].span2:nth-child(3), div[id^="favpromote-box"].span2-4:nth-child(3), div[id*=" favpromote-box"].span2-4:nth-child(3), div[id^="favpromote-box"].span3:nth-child(3), div[id*=" favpromote-box"].span3:nth-child(3), div[id^="favpromote-box"].span4:nth-child(3), div[id*=" favpromote-box"].span4:nth-child(3), div[id^="favpromote-box"].span2:nth-child(5), div[id*=" favpromote-box"].span2:nth-child(5), div[id^="favpromote-box"].span2-4:nth-child(5), div[id*=" favpromote-box"].span2-4:nth-child(5), div[id^="favpromote-box"].span3:nth-child(5), div[id*=" favpromote-box"].span3:nth-child(5), div[id^="favpromote-box"].span4:nth-child(5), div[id*=" favpromote-box"].span4:nth-child(5) { margin-left: 0; clear: both; } div[id^="favpromote-box"].span2:nth-child(4), div[id*=" favpromote-box"].span2:nth-child(4), div[id^="favpromote-box"].span2-4:nth-child(4), div[id*=" favpromote-box"].span2-4:nth-child(4), div[id^="favpromote-box"].span3:nth-child(4), div[id*=" favpromote-box"].span3:nth-child(4) { margin-left: 2.127659574468085%; clear: none; } div[id^="favpromote-box"].span2-4:last-child, div[id*=" favpromote-box"].span2-4:last-child, div[id^="favpromote-box"].span4:last-child, div[id*=" favpromote-box"].span4:last-child { float: none; width: 100%; margin-left: 0; } } @media handheld, only screen and (max-width: 480px) { div[id^="favpromote-icon"] i, div[id*=" favpromote-icon"] i { font-size: 8em; } div[id^="favpromote-box"].span2, div[id*=" favpromote-box"].span2, div[id^="favpromote-box"].span2-4, div[id*=" favpromote-box"].span2-4, div[id^="favpromote-box"].span3, div[id*=" favpromote-box"].span3, div[id^="favpromote-box"].span4, div[id*=" favpromote-box"].span4, div[id^="favpromote-box"].span6, div[id*=" favpromote-box"].span6 { float: none !important; width: 100% !important; margin-left: 0 !important; } } /* ///////////////////////////////// 5. layout effects ///////////////////////////////// */ /* /// js classes */ .favhide { opacity:0; } .favshow { opacity:1; } /* /// no layout effect */ .layout-effect-none { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } /* /// layout effect 1 */ .layout-effect1 { -webkit-animation-name: layout-effect1; -moz-animation-name: layout-effect1; animation-name: layout-effect1; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect1 { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes layout-effect1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes layout-effect1 { 0% { opacity: 0; } 100% { opacity: 1; } } /* /// layout effect 2 */ .layout-effect2 { -webkit-animation-name: layout-effect2; -moz-animation-name: layout-effect2; animation-name: layout-effect2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect2 { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes layout-effect2 { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -moz-transform: none; transform: none; } } @keyframes layout-effect2 { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: translate3d(0, -100%, 0); transform: none; } } /* /// layout effect 3 */ .layout-effect3 { -webkit-animation-name: layout-effect3; -moz-animation-name: layout-effect3; animation-name: layout-effect3; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect3 { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes layout-effect3 { 0% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; transform: none; } } @keyframes layout-effect3 { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* /// layout effect 4 */ .layout-effect4 { -webkit-animation-name: layout-effect4; -moz-animation-name: layout-effect4; animation-name: layout-effect4; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect4 { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes layout-effect4 { 0% { opacity: 0; -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; transform: none; } } @keyframes layout-effect4 { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* /// layout effect 5 */ .layout-effect5 { -webkit-animation-name: layout-effect5; -moz-animation-name: layout-effect5; animation-name: layout-effect5; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect5 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes layout-effect5 { 0% { opacity: 0; -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -moz-transform: none; transform: none; } } @keyframes layout-effect5 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } /* /// layout effect 6 */ .layout-effect6 { -webkit-animation-name: layout-effect6; -moz-animation-name: layout-effect6; animation-name: layout-effect6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect6 { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @-moz-keyframes layout-effect6 { 0% { opacity: 0; -moz-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes layout-effect6 { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } /* /// layout effect 7 */ .layout-effect7 { -webkit-animation-name: layout-effect7; -moz-animation-name: layout-effect7; animation-name: layout-effect7; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect7 { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-moz-keyframes layout-effect7 { 0% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -moz-transform: perspective(400px); transform: perspective(400px); } } @keyframes layout-effect7 { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } } /* /// layout effect 8 */ .layout-effect8 { -webkit-animation-name: layout-effect8; -moz-animation-name: layout-effect8; animation-name: layout-effect8; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes layout-effect8 { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes layout-effect8 { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }