Для wp есть плагин называется mistape https://mistape.com. При выделении текста и нажатии Ctrl+Enter он отправляет на почту выделенный текст. Так вот там очень крутая анимация отправки письма. Пример можете посмотреть на моем сайте https://tehremzona.ru. Я хочу ее вытащить что бы использовать в других местах, но у меня не получается(( можете помочь с этим вопросом? Может ее возможно просто вызвать когда мне это нужно?
2 ответа
Для overlay:
#mistape_dialog .dialog__overlay {
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
На событие добавляется opacity: 1;
Для формы:
#mistape_dialog.dialog--open .dialog__content {
-webkit-animation-name: anim-open;
animation-name: anim-open;
}
#mistape_dialog.dialog--open .dialog__content, #mistape_dialog.dialog--close .dialog__content {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes anim-open {
0% {
opacity: 0;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
то есть если вы хотите использовать такую анимацию то вам нужно просто для любого елемента добавить:
.your-class {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Если вы хотите отказаться от плагина, то не забудьте перенести @keyframes к себе в стили. И на нужное событие добавить css свойства:
-webkit-animation-name: anim-open;
animation-name: anim-open;
-
-
Поправил описание– user243545Commented 21 февр. 2020 в 7:48
-
мне кажется что мне нужна анимация send-letter которая находится в самом низу css файла. Мне нужна анимация конверта при отправке сообщения Commented 21 февр. 2020 в 8:11
.mistape-letter{
width: 640px;
height: 400px;
top: calc(50% - 200px);
position: absolute;
}
.mistape-letter-front{
width: 304px;
height: 190px;
/*background: url(../img/letter-front.svg) no-repeat;*/
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBpZD0ibGVmdCIgZmlsbD0iI0U1MjEyOSIgcG9pbnRzPSIwLDAgMCw0MDAgNC4wNjMsNDAwIDMyMi43NSwyMDEuNzUgMCwwICIvPjxwb2x5Z29uIGlkPSJib3R0b20iIGZpbGw9IiNENjI3MzQiIHBvaW50cz0iMCw0MDAgNjQwLDQwMCA2NDAsMzk4Ljk1MyAzMjAuMjgxLDE5OS44MjggIi8+PHBvbHlsaW5lIGlkPSJyaWdodCIgZmlsbD0iI0JDMjMzRCIgcG9pbnRzPSI2NDAsMCAzMjAsMjAwIDY0MCw0MDAgNjQwLDAgIi8+PC9zdmc+);*/
/*background-repeat: no-repeat;*/
/*background-size: 100% 100%;*/
position: absolute;
bottom: 0;
z-index: 4;
left: calc(50% - 152px);
transform: scale(0.145);
transform-origin: 50% 100%;
opacity: 0;
transition: transform 0.4s, opacity 0.15s;
}
.mistape-letter-front .front-left {
width: 0;
height: 0;
border-left: 152px solid #E42029;
border-right: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.mistape-letter-front .front-right {
width: 0;
height: 0;
border-right: 152px solid #E42029;
border-left: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
.mistape-letter-front .front-right:before {
content: '';
display: block;
width: 0;
height: 0;
border-right: 152px solid rgba(0,0,0,0.2);
border-left: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
top: -95px;
right: -152px;
}
.mistape-letter-front .front-bottom {
width: 0;
height: 0;
border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
}
.mistape-letter-front .front-bottom:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,0.1);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
right: -152px;
}
.mistape-letter-back{
width: 304px;
height: 190px;
/*background: url(../img/letter-back.svg) no-repeat;*/
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjAiIGZpbGw9IiNCMjI0NDMiIHdpZHRoPSI2NDAiIGhlaWdodD0iNDAwIi8+PHBvbHlsaW5lIGlkPSJ0b3AxIiBkaXNwbGF5PSJub25lIiBmaWxsPSIjQjIyNDQzIiBwb2ludHM9IjAsMCAzMjAsMjAwIDY0MCwwICIvPjwvc3ZnPg==);*/
background-color: #E42029;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
bottom: 0;
left: calc(50% - 152px);
transition: transform 0.4s, opacity 0.15s;
transform: scale(0.145);
transform-origin: 50% 100%;
opacity: 0;
}
.mistape-letter-back:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
}
.mistape-letter-back > .mistape-letter-back-top{
/*width: 304px;*/
/*height: 95px;*/
width: 0;
height: 0;
/*background: url(../img/letter-t2.svg) no-repeat;*/
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/
border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
bottom: 100%;
left: calc(50% - 152px);
transition: transform 0.4s;
transform-origin: 50% 100%;
transform: translateX(0) rotateX(-180deg);
}
.mistape-letter-back > .mistape-letter-back-top:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,.3);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
left: -152px;
}
.mistape-letter-top {
width: 0;
height: 0;
/*background: url(../img/letter-t2.svg) no-repeat;*/
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/
/*background-repeat: no-repeat;*/
/*background-size: 100% 100%;*/
border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
z-index: 2;
bottom: 0;
opacity: 0;
left: calc(50% - 152px);
transition: transform 0.3s;
transform-origin: 50% 100%;
transform: rotateX(0deg);
}
.mistape-letter-top:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,.3);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
left: -152px;
}
.mistape-letter-top.close {
transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content .dialog-wrap{
z-index: 3;
position: relative;
}
#mistape_dialog .dialog__content.show-letter .mistape-letter-back,
#mistape_dialog .dialog__content.show-letter .mistape-letter-front{
transform: scale(1) translateY(15%);
opacity: 1;
}
#mistape_dialog .dialog__content.show-letter .mistape-letter-back > .mistape-letter-back-top{
transform: rotateX(0deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-top{
transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom{
background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom textarea{
background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap{
transform: translateY(-150%);
}
#mistape_dialog .dialog__content.show-letter.with-comment .dialog-wrap{
transform: translateY(-50%);
}
#mistape_dialog .mistape_action[data-action="send"]{
position: relative;
z-index: 8;
}
#mistape_dialog .dialog__content.show-letter .mistape_action[data-action="send"]{
transition-delay: 0.3s;
transition: visibility 0.1s, opacity 0.1s;
visibility: hidden!important;
opacity: 0!important;
}
@keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@-moz-keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@-webkit-keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-moz-keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-webkit-keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}