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

Centering an image that is absolutely positioned within a container that is relatively positioned, horizontally

Developing a system mode called "night mode"

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

Difficulty positioning CSS, aligning flex-box grid with floating text

Eliminating extra space below the footer using CSS in Wordpress site

The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

Unable to completely conceal the borders of Material UI Cards

A tutorial on creating dynamic text animations: sliding text effects on web pages

Is there a way to align one <article> next to another <article> to create a horizontal layout?

Creating a vertical triangle pointing to the right as the border of a div element

Wordpress is having issues running jQuery

CSS transformation incomplete

Animating the Click Event to Change Grid Layout in React

How to Resolve File Paths in CSS Using Angular 7 CLI

Troubleshooting Vue.js rendering problems on Safari_BROWSER

Tips for changing color when hovering over elements in a CSS grid

Generating an interactive Datepicker using Jquery

Ways to smoothly conclude a loading animation in real-time

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule