Question 201752 in Html Question posted in
Some basic documentation can be found here.

Html – How add two animation to one element but both works well

I add two animation to one element. One is to rotate 360deg and one is to drag it some pixels towards x-axis using translate() method . But when I run it the element don’t 360deg correctly. It’s rotate some degree and suddenly change to another without animate .

I try to do one rotate and move it certain pixels towards x-axis . But rotation is not smooth.

Tags:

2

Answers


  1. 0 
    @keyframes rotateAndTranslate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: translateX(50px) rotate(360deg);
  }
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: rotateAndTranslate 2s infinite;
}
    <div></div>
    Login or Signup to reply.
  2. 0

    To apply two animations to one element and ensure they both work well together, you can utilize CSS keyframes and animation properties. Here’s an example of how you can achieve this:

    In this example, we define two keyframes animations: rotate and translate. The rotate animation rotates the element 360 degrees continuously over a duration of 4 seconds. The translate animation moves the element horizontally by 100 pixels and then back to its original position over a duration of 2 seconds. The infinite keyword is used to make both animations repeat indefinitely.

    By applying both animations to the same element using the animation property, you can achieve simultaneous and synchronized animations.

    Adjust the animation properties, keyframe percentages, and animation durations as needed to match your desired effects.

    .element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 4s infinite linear, translate 2s infinite ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes translate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
    <div class="element"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search