1

I have an svg with two different animations; a briefcase hopping up and some speed lines. What I want to happen is when it is hovered over, the animations play. The problem is you have to hover over the solid parts rather than the whole thing. I don't want the outer ring moving, so I can't apply the animations to the whole thing.

For the SVGs that have only one animation for, I've used an circle with an opacity of zero to make them work. This does not work with multiple animations.

  /* Animation Code */

  .case:hover {
  animation: jump 1.5s linear infinite;
  position:relative;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  transform-origin: 50% 50%;
  }

@keyframes jump{
0% {transform: translate(0,0) ;}
30% {transform: translate(0,-10%) ;}
100% {transform: translate(0,0) ;}
}

.lines:hover {
      animation: woosh 1.5s linear infinite;
  position:relative;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  transform-origin: 50% 75%;
}

    @keyframes woosh{

0%, 5% {
    transform: scaleY(0);
}

30% {
    transform: scaleY(-1);
    opacity: 0.3;
}
55% {

    opacity: 0;
}

100% {
    transform: scaleY(-1);
    opacity: 0;
}

}

https://jsfiddle.net/paulmadsenbe/tj7q5sgp/

Paul Madsen
  • 11
  • 1
  • Please check this [How to have multiple CSS transitions on an element?](https://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) – enxaneta Feb 11 '19 at 17:38

1 Answers1

1

If you put both of your animated objects in a parent container and then used container:hover .case and container:hover .lines you can trigger them together. Here's a modification of your fiddle: https://jsfiddle.net/3kewaL9r/

aptriangle
  • 1,395
  • 1
  • 9
  • 11
  • Thank you! I'm still learning a lot about code but its something I have to do on the fly. This helps me so much. – Paul Madsen Feb 11 '19 at 20:23