У меня есть анимация, в которой я хочу, чтобы элемент (текст) свернулся с ease-out
и развернулся с ease-in
в середине анимации.
Так что в основном я хочу изменить время анимации -функция в середине анимации - как мне добиться этого желательно без лишних JS?
Я думал о 2 последовательных анимациях, но, возможно, есть какой-то более простой способ?
var animatingNow = false;
function toggleRolling() {
if (animatingNow) {
return;
}
animatingNow = true;
document.querySelector('.roller').classList.add('rolling');
setTimeout(function() {
animating = false;
document.querySelector('.roller').classList.remove('rolling')
}, 2120);
}
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
font-size: 14px;
padding: 30px 20px;
}
.wrapper {
overflow: hidden;
width: 100%;
height: 40px;
background: #444;
border-radius: 5px;
position: relative;
}
.wrapper .roller {
position: absolute;
right: 0;
top: 0;
height: 500%;
display: flex;
padding-right: 16px;
flex-direction: column;
user-select: none;
color: white;
opacity: 0.7;
justify-content: space-between;
transition: opacity 0.4s;
}
.wrapper .roller:hover,
.wrapper .roller.rolling {
opacity: 1;
--last-step-opacity: 0.7;
}
.wrapper .roller:hover {
--last-step-opacity: 1;
}
.wrapper .roller.rolling {
animation: roll 2.12s ease-out;
}
.wrapper .roller>span {
height: 20%;
display: flex;
justify-content: flex-end;
align-items: center;
}
@keyframes roll {
0% {
transform: translateY(0);
opacity: 1;
}
10% {
transform: translateY(0);
opacity: 0;
}
11% {
transform: translateY(-20%);
opacity: 0;
}
12% {
opacity: 1;
}
30%,
70% {
transform: translateY(-40%);
opacity: 1;
}
88% {
transform: translateY(-60%);
opacity: 1;
}
89% {
opacity: 0;
}
90% {
transform: translateY(-80%);
}
100% {
opacity: 0.7;
opacity: var(--last-step-opacity);
transform: translateY(-80%);
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<div onclick="toggleRolling()" class="wrapper">
<div class="roller">
<span> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M12 12H14C15.1046 12 16 11.1046 16 10V2C16 0.895431 15.1046 0 14 0H6C4.89543 0 4 0.895431 4 2V4H2C0.895431 4 0 4.89543 0 6V14C0 15.1046 0.895431 16 2 16H10C11.1046 16 12 15.1046 12 14V12ZM14 2H6V4H10C11.1046 4 12 4.89543 12 6V10H14V2ZM10 6H2L2 14H10V6Z" fill="currentColor" /> </svg></span>
<span>Copied!</span>
<span> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M12 12H14C15.1046 12 16 11.1046 16 10V2C16 0.895431 15.1046 0 14 0H6C4.89543 0 4 0.895431 4 2V4H2C0.895431 4 0 4.89543 0 6V14C0 15.1046 0.895431 16 2 16H10C11.1046 16 12 15.1046 12 14V12ZM14 2H6V4H10C11.1046 4 12 4.89543 12 6V10H14V2ZM10 6H2L2 14H10V6Z" fill="currentColor" /> </svg></span>
</div>
</div>