Swipe hand icon animation with CSS - Html

Denees
February 27, 2023
247 views
0 votes
2 Answers

html { background: #4F4F4F; }

.path {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(149, 147, 241, 0.5);
    border-radius: 40px;
    top: 28px;
    left: 78px;
}
.hand-icon {
    position: relative;
    background-image: url('https://i.postimg.cc/8556gm60/hand.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 100px;

    animation: spin 2s infinite;
    transform-origin: 52% 62%;
}
@keyframes spin {
    0% { transform: rotate(30deg); margin-left: 20px; }
    50% { transform: rotate(-15deg); margin-left: -20px; }
    100% { transform: rotate(0deg); margin-left: 20px; }
}

<div class="swipe">
    <div class="path"></div>
    <div class="hand-icon"></div>
</div>

I have a good background in CSS, but I am quite new to CSS @keyframes, even though I cannot achieve what is in the screenshot above. The request is to make it animate infinitely and showing that you can drag the screen from the right to left. What I achieved you can see in the code attached.

How can I combine 2 animations and make the purple path animated as well on hand swipe?
Also why the first step is not animated? it is like jumping to 30deg, then it goes smooth. Tried to remake it with 100% { transform: rotate(0deg); margin-left: 20px; } but id did not work. Can someone point me in the right direction?

Mostly I would like to go with first animation from this example

Answers

You could just get the blueish dot to also have an animation which expands the width but keeps the right hand side in the same place.

This snippet assumes you don’t want to change the HTML (e.g. put both in a container) so it does not use right: 0 to fix the right hand side.

html {
  background: #4F4F4F;
}

.path {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgba(149, 147, 241, 0.5);
  border-radius: 40px;
  top: 28px;
  left: 78px;
  animation: expand 2s infinite;
  margin: 0;
  padding: 0;
}

@keyframes expand {
  0% {
    width: 20px;
  }
  50% {
    width: 78px;
    left: 20px;
  }
  100% {
    width: 20px;
  }
}

.hand-icon {
  position: relative;
  background-image: url('https://i.postimg.cc/8556gm60/hand.png');
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  animation: spin 2s infinite;
  transform-origin: 52% 62%;
}

@keyframes spin {
  0% {
    transform: rotate(30deg);
    margin-left: 20px;
  }
  50% {
    transform: rotate(-15deg);
    margin-left: -20px;
  }
  100% {
    transform: rotate(0deg);
    margin-left: 20px;
  }
}

<div class="swipe">
  <div class="path"></div>
  <div class="hand-icon"></div>
</div>

This solution achieves exactly what you want:

window.onload = () => {
  document.querySelector(".path").style.animation = "swipe-dot 2s 0.5s infinite";
  
  document.querySelector(".hand-icon").style.animation = "swipe-hand 2s infinite";

}

html { background: #4F4F4F; }

.path {
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(149, 147, 241, 0.5);
    border-radius: 40px;
    top: 28px;
    left: 78px;
    visibility: hidden;
}

.hand-icon {
    position: relative;
    background-image: url('https://i.postimg.cc/8556gm60/hand.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 100px;

    transform-origin: 52% 62%;
}

@keyframes swipe-hand {
    25% { transform: translate(20px) rotate(30deg); }
    50% { transform: translate(-20px) rotate(-15deg); }
    100% { transform: translate(0px) rotate(0); }
}

@keyframes swipe-dot {
  12% {
    visibility: visible;
    width: 40px;
  }
  25% {
    visibility: visible;
    transform: translate(-65px);
    width: 20px;
  }
  26% { visibility: hidden; }
}

<div class="swipe">
    <div class="path"></div>
    <div class="hand-icon"></div>
</div>

And yes you need a bit of JS since we’re waiting for an image to arrive to the browser before starting both animations

Regards

Please signup or login to give your own answer.

Click here to cancel reply.

Swipe hand icon animation with CSS – Html

Answers