CODEWITHSUNDEEP
cssanimationcss-animationskeyframe
jessica mele
jessica mele

Reputation: 435

Combining keyframes animations into one

I have an image that I want to "walk across" a div then at the end flip around horizontally and head back the other way. I have created a codepen here: https://codepen.io/jessiemele/pen/rGQWWE. The tinyWalk animation gets very bouncy towards the end, right before it turns and heads back to the start, I'm assuming it is form the image hitting the top of the div. I'm wondering if there is a way to combine these 2 animations to just run them on the image so I don't have to run tinyWalk on the div. My code is here:

<div class="catapillarBox">
<img src="https://i.imgur.com/0XPhWfE.jpg" class="caterpillar" 
alt="caterpillar drawing" />
</div>
</div>
<div class="blueBox">
<h5>I'm your box</h5>
</div>

CSS:

.blueBox {
  background-color: #1d88eb;
  width: 875px;
  height: 400px;
  margin-top: 125px;
  padding-bottom: 70px;
  margin-top: 150px;
  z-index: 2;
}
img.caterpillar {
  position: absolute;
  top: 125px;
  left:0;
  -webkit-animation: walk 20s forwards infinite linear;
  animation: walk 20s forwards infinite linear;
  z-index: 3;
}
@keyframes walk{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 700px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);
}    
.catapillarBox {
  width: 200px;
  height: 100px;
  -webkit-animation: tinywalk 500ms linear alternate infinite;
  animation: tinywalk 500ms linear alternate infinite;
}
@keyframes tinywalk {
  0%{ transform: rotate(0);}
  25%{ transform: rotate(-1deg);}
  50%{ transform: rotate(1deg);}
  75%{ transform: rotate(-1deg);}
  100%{ transform: rotate(0);}
}

Upvotes: 0

Views: 648

Answers (1)

Jack Moody
Jack Moody

Reputation: 1771

Jessica, I created a codepen here that should solve your problem. It looks like your rotation of your image is just too drastic for your liking. I edited it to a 0.2 degree rotation. Try the following CSS:

.blueBox {
    background-color: #1d88eb;
    width: 875px;
    height: 400px;
    margin-top: 125px;
    padding-bottom: 70px;
    margin-top: 150px;
    z-index: 2;
}
.catapillarBox {
    width: 200px;
    height: 100px;
   -webkit-animation: tinywalk 500ms linear alternate infinite;
    animation: tinywalk 500ms linear alternate infinite;
}
@keyframes tinywalk {
  0%{ transform: rotate(0);}
  25%{ transform: rotate(-0.2deg);}
  50%{ transform: rotate(0.2deg);}
  75%{ transform: rotate(-0.2deg);}
  100%{ transform: rotate(0);}
}
img.caterpillar {
    position: absolute;
    top: 125px;
    left:0;
    -webkit-animation: walk 20s forwards infinite linear;
    animation: walk 20s forwards infinite linear;
    z-index: 3;
}
@keyframes walk{
   0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 700px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);
}

Upvotes: 1

Related Questions