Achieve seamless transitions between animations when hovering with CSS3

Question

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and bouncy. Is there a way to make this transition smoother by perhaps bringing the element back to its initial state between animations when using mouseenter and mouseleave? It's important to note that both animations start and end in the same states.

@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};

@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0);  }
};

div{
animation: first-animation 1.7s ease-in-out infinite;
}

div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}

css animation css-transitions css-animations

Answer 1

Answer №1

Utilizing scale transforms may not achieve the desired result.

An alternative approach involves switching from scale() to translateZ(). By applying perspective, a similar scale effect can be achieved with the ability to make it very small by setting a high perspective value. Additionally, note that perspective is an animatable property.

The drawback of this method is the requirement of adding 2 wrap around layers, but the final outcome is worth it. The original version has been retained for comparison purposes.

@keyframes first-animation {
0% { transform: scale(1,1);}
50% { transform: scale(0.8,0.8); }
100% { transform: scale(1,1); }
}

@keyframes second-animation {
0% { transform: scale(1,1); }
70% { transform: scale(0.7,0.7); }
80% { transform: scale(0.9,0.9); }
100% { transform: scale(1,1);  }
}

.sample {
    background-color: lightblue;
    animation: first-animation 1.7s ease-in-out infinite;
}

.sample:hover {
animation: second-animation 1.1s ease-in-out infinite;
}

.dim {
    width: 200px;
    height: 200px;
}

.base1 {
    perspective: 1000px;
    transition: perspective 2s ease-out;
    position: absolute;
    left: 300px;
  top: 10px;
}
.base1:hover {
    perspective: 9999px;
}

.base2 {
    width: 100%;
    height: 100%;
    animation: animation1 1.7s ease-in-out infinite;
    perspective: 9999px;
    transition: perspective 2s ease-in;
}
.base1:hover .base2 {
    perspective: 1000px;
}

.inner {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    animation: animation2 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 99999px;
}

@keyframes animation1 {
0% { transform: translateZ(0px);}
50% { transform: translateZ(-200px); }
100% { transform: translateZ(0px); }
}

@keyframes animation2 {
      0% { transform: translateZ(0px);}
     70% { transform: translateZ(-300px); }
     80% { transform: translateZ(-100px); }
    100% { transform: translateZ(0px); }
}

<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
    <div class="base2">
        <div class="inner">DEMO</div>
    </div>
</div>

Answer 2

Utilizing scale transforms may not achieve the desired result.

An alternative approach involves switching from scale() to translateZ(). By applying perspective, a similar scale effect can be achieved with the ability to make it very small by setting a high perspective value. Additionally, note that perspective is an animatable property.

The drawback of this method is the requirement of adding 2 wrap around layers, but the final outcome is worth it. The original version has been retained for comparison purposes.

@keyframes first-animation {
0% { transform: scale(1,1);}
50% { transform: scale(0.8,0.8); }
100% { transform: scale(1,1); }
}

@keyframes second-animation {
0% { transform: scale(1,1); }
70% { transform: scale(0.7,0.7); }
80% { transform: scale(0.9,0.9); }
100% { transform: scale(1,1);  }
}

.sample {
    background-color: lightblue;
    animation: first-animation 1.7s ease-in-out infinite;
}

.sample:hover {
animation: second-animation 1.1s ease-in-out infinite;
}

.dim {
    width: 200px;
    height: 200px;
}

.base1 {
    perspective: 1000px;
    transition: perspective 2s ease-out;
    position: absolute;
    left: 300px;
  top: 10px;
}
.base1:hover {
    perspective: 9999px;
}

.base2 {
    width: 100%;
    height: 100%;
    animation: animation1 1.7s ease-in-out infinite;
    perspective: 9999px;
    transition: perspective 2s ease-in;
}
.base1:hover .base2 {
    perspective: 1000px;
}

.inner {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    animation: animation2 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 99999px;
}

@keyframes animation1 {
0% { transform: translateZ(0px);}
50% { transform: translateZ(-200px); }
100% { transform: translateZ(0px); }
}

@keyframes animation2 {
      0% { transform: translateZ(0px);}
     70% { transform: translateZ(-300px); }
     80% { transform: translateZ(-100px); }
    100% { transform: translateZ(0px); }
}

<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
    <div class="base2">
        <div class="inner">DEMO</div>
    </div>
</div>

Answer 3

Answer №2

To achieve the desired outcome, utilizing CSS3 animation events is crucial. Specifically, incorporating "AnimationIteration" will allow you to trigger an event after each iteration. To add a secondary animation effect, I have appended a class to the end of this event.

Check out the Codepen demo here

$(document).ready(function() {
  var animationElement = $(".animation");

  $("body").on({
    mouseover: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.addClass("second-animation");
      });
    },
    mouseleave: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.removeClass("second-animation");
      });
    }
  });
});

Answer 4

To achieve the desired outcome, utilizing CSS3 animation events is crucial. Specifically, incorporating "AnimationIteration" will allow you to trigger an event after each iteration. To add a secondary animation effect, I have appended a class to the end of this event.

Check out the Codepen demo here

$(document).ready(function() {
  var animationElement = $(".animation");

  $("body").on({
    mouseover: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.addClass("second-animation");
      });
    },
    mouseleave: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.removeClass("second-animation");
      });
    }
  });
});

Answer 5

Answer №3

Are you familiar with the concept of utilizing the transition property in CSS? If not, it is recommended to include transition rules within the parent div for a smoother effect.

div{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}

Answer 6

Are you familiar with the concept of utilizing the transition property in CSS? If not, it is recommended to include transition rules within the parent div for a smoother effect.

div{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}

Achieve seamless transitions between animations when hovering with CSS3

Answer №1

Answer №2

Answer №3

Similar questions

Combining multiple images into one CSS image sprite to create 4 clickable

There is a lack of a responsive page after being redirected from Facebook

I'm having issues with my navigation bar, and the border on the right side is not functioning correctly

What is the best way to merge a card-deck with fixed-width cards?

Tips for filling the offset space with a column

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Card columns with dropdown extending into adjacent column

Fullscreen overlay or pop-up display

Guide to positioning a toolbar within an element when hovering over it in HTML with the help of JQuery

Is there a bug or user error causing CSS float not to be applied in Chrome?

Customizing the DatePicker with a unique button in material-ui

Accessing the parent element within a hover declaration without explicitly naming it

What is the best way to display DT elements next to each other?

Ensure the first column is fixed and all other columns have the same height

When text is inserted into an inline-block div, it causes the div to shift downwards in

Utilize the CSS property font-family to inherit styles for headings

Tips for creating horizontal dividers with CSS in Vuetify using <v-divider> and <v-divider/> styling

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

Arranging and overlaying images with HTML and CSS

Checkbox label covering checkbox