Is there a way to craft a continuous scale mouseover animation along with a seamless mouseout transition using CSS?

Question

Is there a way to craft a continuous scale mouseover animation along with a seamless mouseout transition using CSS?

I am currently working on a CSS3 effect that triggers on mouseover. This effect involves animating an inner div by scaling it endlessly.

Everything is functioning correctly, however, when I move the mouse away, the div abruptly returns to its original size. I am looking to incorporate a smooth transition to scale the div back to its original size.

I have already explored the suggestions from this post: Make CSS Hover state remain after "unhovering" Unfortunately, the provided code did not work for me. I suspect that my issue may be related to the "infinite" loop of the scale effect.

The desired outcome I am aiming for is that when the mouse moves out, the image smoothly transitions back to its original size.

Below is the code: https://jsfiddle.net/9dtqpsLa/1/

CSS

@keyframes imageZoom{
    0% { transform: scale(1); }
    50% { transform: scale(1.24); }
    100% { transform: scale(1);}
}

@-moz-keyframes imageZoom{
    0% { -moz-transform: scale(1);}
    50% { -moz-transform: scale(1.24); }
    100% { -moz-transform: scale(1); }
}

@-webkit-keyframes imageZoom{
    0% { -webkit-transform: scale(1); }
    50% {-webkit-transform: scale(1.24); }
    100% { -webkit-transform: scale(1); }
}

@-ms-keyframes imageZoom{
    0% { -ms-transform: scale(1); }
    50% { -ms-transform: scale(1.24); }
    100% { -ms-transform: scale(1); }
}

.article:hover .imageWrapper {
    animation: imageZoom linear 10s;
    animation-iteration-count: infinite;
    -webkit-animation: imageZoom linear 10s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: imageZoom linear 10s;
    -moz-animation-iteration-count: infinite;
    -ms-animation: imageZoom linear 10s;
    -ms-animation-iteration-count: infinite;
    transform-origin: 50% 80%;
}

.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
}

HTML

<div class="article">
    <div class="imageWrapper">

    </div>
</div>

Your assistance would be greatly appreciated.

Thank you very much

css scale

Answer 1

Answer №1

OBJECTIVES:
1. Add animation to image for expansion and contraction on hover
2. Implement mouseleave animation to revert image to original state

ISSUES:
Struggling with CSS to utilize both animation and transition simultaneously. The pulsing effect on hover requires animation, while the return to default state necessitates a transition. Considering implementing this functionality using JavaScript. Detailed notes provided below.

https://jsfiddle.net/Bushwazi/9dtqpsLa/5/

HTML:
notes: identical to sample example

<div class="article">
    <div class="imageWrapper"></div>
</div>

CSS:
notes:
1. Removed animation.
2. Enabling scale based on presence of [data-dir='expand'].
3. Moved transform-origin and transition to default state of .imageWrapper.
4. Vendor prefixes may be required.

.article[data-dir='expand'] .imageWrapper {
    transform:scale(1.24)
}

.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    transition:all 10.0s linear 0.0s;
}

JAVASCRIPT:
notes:
1. Completely new script

/*
     1. Hover triggers animation
     2. After 10 seconds, animation direction changes based on 'isHovering' variable
     3. Mouseleave event resets to default state
 */

var thisArticle = document.querySelector('.article'),
    thisTimer = '',
    isHovering = false;

thisArticle.addEventListener('mouseenter', function(){
    console.log('mouseenter');
    thisArticle.setAttribute('data-dir', 'expand');
    thisTimer = setInterval(fireAnimation, 10000);
    isHovering = true
}, false);

thisArticle.addEventListener('mouseleave', function(){
    console.log('mouseleave');
    thisArticle.removeAttribute('data-dir');
    isHovering = false;
    clearInterval(thisTimer);
}, false);

var fireAnimation = function(){
    if(isHovering){
        if(thisArticle.getAttribute('data-dir') === 'expand'){
            thisArticle.removeAttribute('data-dir');
        } else {
            thisArticle.setAttribute('data-dir', 'expand');
        }
    } else {
        clearInterval(thisTimer);
    }
    alert('change direction');
}

FURTHER THOUGHTS
1. Preferable to use classList over data attribute approach. Consider optimizing in future.
2. For mouseleave animation, current setup lacks awareness of the scale upon exit, leading to a fixed 10-second duration. Potential enhancement opportunities exist.

Answer 2

OBJECTIVES:
1. Add animation to image for expansion and contraction on hover
2. Implement mouseleave animation to revert image to original state

ISSUES:
Struggling with CSS to utilize both animation and transition simultaneously. The pulsing effect on hover requires animation, while the return to default state necessitates a transition. Considering implementing this functionality using JavaScript. Detailed notes provided below.

https://jsfiddle.net/Bushwazi/9dtqpsLa/5/

HTML:
notes: identical to sample example

<div class="article">
    <div class="imageWrapper"></div>
</div>

CSS:
notes:
1. Removed animation.
2. Enabling scale based on presence of [data-dir='expand'].
3. Moved transform-origin and transition to default state of .imageWrapper.
4. Vendor prefixes may be required.

.article[data-dir='expand'] .imageWrapper {
    transform:scale(1.24)
}

.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    transition:all 10.0s linear 0.0s;
}

JAVASCRIPT:
notes:
1. Completely new script

/*
     1. Hover triggers animation
     2. After 10 seconds, animation direction changes based on 'isHovering' variable
     3. Mouseleave event resets to default state
 */

var thisArticle = document.querySelector('.article'),
    thisTimer = '',
    isHovering = false;

thisArticle.addEventListener('mouseenter', function(){
    console.log('mouseenter');
    thisArticle.setAttribute('data-dir', 'expand');
    thisTimer = setInterval(fireAnimation, 10000);
    isHovering = true
}, false);

thisArticle.addEventListener('mouseleave', function(){
    console.log('mouseleave');
    thisArticle.removeAttribute('data-dir');
    isHovering = false;
    clearInterval(thisTimer);
}, false);

var fireAnimation = function(){
    if(isHovering){
        if(thisArticle.getAttribute('data-dir') === 'expand'){
            thisArticle.removeAttribute('data-dir');
        } else {
            thisArticle.setAttribute('data-dir', 'expand');
        }
    } else {
        clearInterval(thisTimer);
    }
    alert('change direction');
}

FURTHER THOUGHTS
1. Preferable to use classList over data attribute approach. Consider optimizing in future.
2. For mouseleave animation, current setup lacks awareness of the scale upon exit, leading to a fixed 10-second duration. Potential enhancement opportunities exist.

Answer 3

Answer №2

When the mouse moves away from the element, the styles in the :hover pseudo-class are removed from the element, returning it to its original state.

To control the animation, you need to start and pause it:

Check out this fiddle where I made some edits, expanded the shorthand properties, and removed vendor prefixes:

https://jsfiddle.net/9dtqpsLa/4/

@keyframes imageZoom {
    100% {
        transform: scale(4);
    }
}
.article:hover .imageWrapper {
    animation-play-state: running;
}
.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    animation-name: imageZoom;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: both;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

Note that all the animation controls are now in the base class with :hover triggering the animation.

Answer 4

When the mouse moves away from the element, the styles in the :hover pseudo-class are removed from the element, returning it to its original state.

To control the animation, you need to start and pause it:

Check out this fiddle where I made some edits, expanded the shorthand properties, and removed vendor prefixes:

https://jsfiddle.net/9dtqpsLa/4/

@keyframes imageZoom {
    100% {
        transform: scale(4);
    }
}
.article:hover .imageWrapper {
    animation-play-state: running;
}
.article {
    background-color: #e6e6e6;
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.imageWrapper {
    background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
    width: 300px;
    height: 300px;
    transform-origin: 50% 80%;
    animation-name: imageZoom;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: both;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

Note that all the animation controls are now in the base class with :hover triggering the animation.

Is there a way to craft a continuous scale mouseover animation along with a seamless mouseout transition using CSS?

Answer №1

Answer №2

Similar questions

How to align li elements at center in a Bootstrap navbar

Creating a Distinct Interior Array Separate from the Exterior

React Native formInput Component with Underline Decoration

When there are spaces in the button, it will result in the button creating a new line within the Navbar

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

"Enhance Your Webpage with Textual Links that Display Background

How to create centered striped backgrounds in CSS

Flaws in the implementation of Github pages deployment hindered its

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

Issue with Aligning Text Inputs and Images in Firefox

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

Is it possible to initially design a login page using HTML/CSS and JavaScript, and then integrate VUE into it?

What is the reason behind the inability to set a maximum width for containers?

Hidden visibility of input field prevents the value from being posted

Eliminate :hover effects from the :after elements' content

Steps to incorporate the latest Material Design Bottom App Bar into your project

Having trouble importing CSS in ReactJS?