<div class="wrapper">
<section class="wide">
<h2>CSS Animation</h2>
<div class="vc-vm-swipe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5 25 20" class="vc-vm-arrow"><defs><style>.cls-1{fill:#fff;stroke:#231f20;}</style></defs>
<path class="cls-1" d="M4.24,20.5a1.12,1.12,0,0,1,.49-1L12,13a1.78,1.78,0,0,1,2.33,0,1.44,1.44,0,0,1,0,2.09l-4.5,4H25.19a1.45,1.45,0,1,1,0,2.89H9.78l4.5,4a1.38,1.38,0,0,1,0,2.09,2,2,0,0,1-2.33,0L4.73,21.66a1.56,1.56,0,0,1-.49-1.16Z" transform="translate(-3.49 -5.44)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18 -1 40 56" class="vc-vm-hand vc-vm-hand-animated"><defs><style>.cls-1{fill:#fff;stroke:#231f20;}</style></defs><path class="cls-1" d="M58.78,18.62a4,4,0,0,0-3.64-1.09A3.41,3.41,0,0,0,54,18V13.45a4,4,0,0,0-4-4,3.66,3.66,0,0,0-.81.09A3.41,3.41,0,0,0,48,10V9.45a4,4,0,0,0-4-4,3.66,3.66,0,0,0-.81.09A4.07,4.07,0,0,0,40,9.6V12a4,4,0,0,0-5.47,1.46A3.93,3.93,0,0,0,34,15.6V38.79l-2.74-3.13a5,5,0,0,0-6.86-.61l-.7.56a2.91,2.91,0,0,0-.7,3.84L30.08,51A16.35,16.35,0,0,0,44,59.45a16,16,0,0,0,16-16v-22A4,4,0,0,0,58.78,18.62ZM44,57.45A14.38,14.38,0,0,1,31.8,49.93L24.69,38.37a.93.93,0,0,1,.21-1.2l.7-.56a3,3,0,0,1,4.11.37l4.49,5.13a1,1,0,0,0,1.41.08,1,1,0,0,0,.34-.74V15.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,39.9,15a2.42,2.42,0,0,1,.05.47v16a1,1,0,0,0,2,0V9.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,45.9,9a2.42,2.42,0,0,1,.05.47v22a1,1,0,0,0,2,0V13.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,51.9,13a2.42,2.42,0,0,1,.05.47v18a1,1,0,0,0,2,0V21.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,57.9,21a2.42,2.42,0,0,1,.05.47v22A14,14,0,0,1,44,57.45Z" transform="translate(-3.49 -5.44)"/></svg>
</div>
</section>
<section class="wide">
<h2>CSS Transition + JS</h2>
<div class="vc-vm-swipe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5 25 20" class="vc-vm-arrow"><defs><style>.cls-1{fill:#fff;stroke:#231f20;}</style></defs>
<path class="cls-1" d="M4.24,20.5a1.12,1.12,0,0,1,.49-1L12,13a1.78,1.78,0,0,1,2.33,0,1.44,1.44,0,0,1,0,2.09l-4.5,4H25.19a1.45,1.45,0,1,1,0,2.89H9.78l4.5,4a1.38,1.38,0,0,1,0,2.09,2,2,0,0,1-2.33,0L4.73,21.66a1.56,1.56,0,0,1-.49-1.16Z" transform="translate(-3.49 -5.44)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="18 -1 40 56" class="vc-vm-hand" id="transition"><defs><style>.cls-1{fill:#fff;stroke:#231f20;}</style></defs><path class="cls-1" d="M58.78,18.62a4,4,0,0,0-3.64-1.09A3.41,3.41,0,0,0,54,18V13.45a4,4,0,0,0-4-4,3.66,3.66,0,0,0-.81.09A3.41,3.41,0,0,0,48,10V9.45a4,4,0,0,0-4-4,3.66,3.66,0,0,0-.81.09A4.07,4.07,0,0,0,40,9.6V12a4,4,0,0,0-5.47,1.46A3.93,3.93,0,0,0,34,15.6V38.79l-2.74-3.13a5,5,0,0,0-6.86-.61l-.7.56a2.91,2.91,0,0,0-.7,3.84L30.08,51A16.35,16.35,0,0,0,44,59.45a16,16,0,0,0,16-16v-22A4,4,0,0,0,58.78,18.62ZM44,57.45A14.38,14.38,0,0,1,31.8,49.93L24.69,38.37a.93.93,0,0,1,.21-1.2l.7-.56a3,3,0,0,1,4.11.37l4.49,5.13a1,1,0,0,0,1.41.08,1,1,0,0,0,.34-.74V15.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,39.9,15a2.42,2.42,0,0,1,.05.47v16a1,1,0,0,0,2,0V9.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,45.9,9a2.42,2.42,0,0,1,.05.47v22a1,1,0,0,0,2,0V13.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,51.9,13a2.42,2.42,0,0,1,.05.47v18a1,1,0,0,0,2,0V21.6a2.11,2.11,0,0,1,1.58-2.15A2,2,0,0,1,57.9,21a2.42,2.42,0,0,1,.05.47v22A14,14,0,0,1,44,57.45Z" transform="translate(-3.49 -5.44)"/></svg>
</div>
</section>
</div>.wrapper {display: flex;
background-color: #fff;}
.wrapper div:not([class]) {
width: 200px;
margin-bottom: 30px;
text-align: right;
padding-left: 200px;
box-sizing: content-box;
background-color: lightblue;
}
.vc-vm-hand {
opacity: 1;
/* animation: hand 10s ease-in-out infinite; */
transform:translateX(0) rotate(0deg);
transition: transform 0.4s ease-in;
}
.wide {
flex-basis: 800px;
display: flex;
justify-content: flex-end;
background-color: lightpink;
}
.vc-vm-swipe {
width: 100px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
align-items: flex-end;
background-color: transparent;}
.vc-vm-arrow {
width: 70px;
}
.vc-vm-hand-animated {
animation: hand 10s ease-in infinite;
}
@keyframes hand {
/* замах */
0%, 20% {
transform: translate(-5%, 0) rotate(20deg);
}
/* идет налево и там остается */
5%, 7%, 25%, 27% {
opacity: 1;
transform: translateX(-600%) rotate(-20deg);
}
/* все еще там, но пропадает */
9%, 29% {
transform: translateX(-600%) rotate(-20deg);
opacity: 0;
}
/* возвращается направо невидимкой */
10%, 30% {
opacity: 0;
transform: translate(0, 0) rotate(0);
}
12%, 32% {
/* проявляется справа */
opacity: 1;
}
/* остается справа */
19%, 99% {
transform: translate(0, 0) rotate(0);
}
}
.vc-vm-hand-transition-start {
transform: translate(-5%, 0) rotate(20deg);
}
.vc-vm-hand-transition {
transform: translateX(-600%) rotate(-20deg);
}
.vc-vm-hand-transition2 {
transform: translate(-700%, 2rem) rotate(-40deg);
}
const myElement = document.querySelector(`#transition`);
var timer = window.setInterval(function() {
myElement.classList.add("vc-vm-hand-transition-start");
window.setTimeout(function() {
myElement.addEventListener("transitionend", startTrans());
}, 300);
window.setTimeout(function() {
myElement.addEventListener("transitionend", contTrans);
}, 500);
window.setTimeout(function() {
myElement.addEventListener("transitionend", contTrans2);
}, 1000);
window.setTimeout(function() {
myElement.addEventListener("transitionend", endTrans);
}, 1300);
}, 10000);
function startTrans() {
myElement.classList.remove("vc-vm-hand-transition-start");
myElement.classList.add("vc-vm-hand-transition");
myElement.removeEventListener("transitionend", startTrans);
}
function contTrans() {
myElement.classList.remove("vc-vm-hand-transition");
myElement.classList.add("vc-vm-hand-transition-start");
myElement.removeEventListener("transitionend", contTrans);
}
function contTrans2() {
myElement.classList.remove("vc-vm-hand-transition-start");
myElement.classList.add("vc-vm-hand-transition2");
myElement.removeEventListener("transitionend", contTrans2);
}
function endTrans() {
myElement.classList.remove("vc-vm-hand-transition", "vc-vm-hand-transition2");
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.