Файловый менеджер

Файловый менеджер - Редактировать - /home/pimjdymy/public_html/zeroesops/wp-content/themes/zeroesops/assets/scss/global/animations.scss

Назад
/=========================================== = 03. Custom Animation Css ===========================================/ @-webkit-keyframes moveVertical { to { opacity: 1; -webkit-transform: translateY(0) } } @keyframes moveVertical { to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes moveHorizontal { to { -webkit-transform: translateX(0); opacity: 1 } } @keyframes moveHorizontal { to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } } .move-up { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); &.animate{ -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -webkit-animation: moveVertical .65s ease forwards; animation: moveVertical .65s ease forwards; } } .move-up-x { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); &.animate{ -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); -webkit-animation: moveHorizontal .65s ease forwards; animation: moveHorizontal .65s ease forwards; } } /* ------------------------ Custom Animation 01 ----------------------------/ @-webkit-keyframes headerSlideDown { 0% { margin-top: -100px } to { margin-top: 0 } } @keyframes headerSlideDown { 0% { margin-top: -100px } to { margin-top: 0 } } / -------------------------------------- Custom Hide Animation ---------------------------------------/ @-webkit-keyframes hide-animation { 0% { -webkit-transform: translateY(0); opacity: 1 } to { -webkit-transform: translateY(60px); opacity: 0 } } @keyframes hide-animation { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } to { -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 0 } } / -------------------------------------- Custom Slide Show Animation ---------------------------------------/ @-webkit-keyframes show-animation { 0% { -webkit-transform: translateY(60px); opacity: 0 } to { -webkit-transform: translateY(0); opacity: 1 } } @keyframes show-animation { 0% { -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 0 } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } } / -------------------------------------- Custom Slide Out To Right ---------------------------------------/ @-webkit-keyframes slide-out-to-right { 0% { -webkit-transform: translateX(0); opacity: 1 } to { -webkit-transform: translateX(40px); opacity: 0 } } @keyframes slide-out-to-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } to { -webkit-transform: translateX(60px); transform: translateX(60px); opacity: 0 } } / -------------------------------------- Custom Slide Out To Left ---------------------------------------/ @-webkit-keyframes slide-in-to-left { 0% { -webkit-transform: translateX(60px); opacity: 0 } to { -webkit-transform: translateX(0); opacity: 1 } } @keyframes slide-in-to-left { 0% { -webkit-transform: translateX(40px); transform: translateX(40px); opacity: 0 } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } } / ------------------------ Brook Hover Effect ---------------------------/ .brook-transition{ -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1); transition: all .3s cubic-bezier(.645,.045,.355,1); } .bk-hover{ a{ position: relative; overflow: hidden; z-index: 1; display: inline-block; color: #999; &::after{ content: ""; width: 0; height: 1px; bottom: 0; position: absolute; left: auto; right: 0; z-index: -1; -webkit-transition: width .6s cubic-bezier(.25,.8,.25,1) 0s; transition: width .6s cubic-bezier(.25,.8,.25,1) 0s; background: currentColor; } &:hover{ &::after{ width: 100%; left: 0; right: auto; } } } &.hover-text-dark{ a{ &:hover{ } } } } / ------------------------ Separator Bounce ---------------------------*/ @-webkit-keyframes separator-bounce { 0%, 80%, to { -webkit-transform: scale(.5); transform: scale(.5) } 40% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes separator-bounce { 0%, 80%, to { -webkit-transform: scale(.5); transform: scale(.5) } 40% { -webkit-transform: scale(1); transform: scale(1) } }

| ver. 1.4 | Github | .