LaVOZs

The World’s Largest Online Community for Developers

'; javascript - @webkit keyframes doesnt work pretty well for hover any solution? - LavOzs.Com

i tried to ask my question pretty simple... i have 3 box here an i have an animation for all of them i am using the webkate frames for animation if i started just like that it will do the animation when the page is loaded but i want it to do the animation when i hovered another element...

Html Codes :

<div class="Ball1" id="Ball1">
</div>


<div class="Ball2" id="Ball2">
</div>


<div class="Ball3" id="Ball3">
</div>

CSS Codes :

#Ball1,#Ball2,#Ball3 {
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
border-radius: 60%;
}

//An Element... For Example a text or a box or body or anything else
#anelemnt:hover > #Ball1,#Ball2,#Ball3 {
-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 
0.745, 0.715) both;
animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 
0.715) both;
}

@-webkit-keyframes puff-in-center {
0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}
}

@keyframes puff-in-center {
0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}
}
///////

What your code is doing currently:

Based on the code shown, you are triggering the animation on the Ball1 when you hover over it's direct parent element with the id of "anelement", and the animation of Ball2 and Ball3 immediately...

What I think you are intending to do:

My guess is that you are intending to apply the #anelement:hover to all three Balls, but the previous combination selectors do not apply after the commas.

Recommended fix:

Therefore you need:

#anelemnt:hover > #Ball1,#anelemnt:hover > #Ball2,#anelemnt:hover > #Ball3 {

or

#anelemnt:hover > .ball would be recommended and remove the id's and apply the same ball class to all 3 divs.

I'm not sure if this is actually what you intend though, as your HTML code does not display a parent element with the id of "anelement".

How to animate based on hovering over another element:

If you want the ball to animate when you hover over another item on the page then with CSS generally you would only be able to apply this affect to an element based on hovering either the element, or a parent or sibling as you've done here using the CSS selectors (see combinators section here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators)

You can animate a child or sibling element of the element you are hovering over, but not a parent element of it.

Also, since you are only including keyframes for 0 and 100, I would recommend using CSS "transitions" instead (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

I hope this helps!

Related
Webkit Keyframes on Hover - Prevent Previous Animation
Can I have a 1000px-wide <div> contain a 1300px-wide <div>?
Webkit keyframe not working in chrome
CSS3 - Image Slideshow
My dropdown menu doesn't take in horizontal and there is a space between the dropdown buttons. Any one?
2 oversized divs next to each other in 100% div
Why when I use transform scale it moves the animated div's position
-webkit-keyframes and keyframes with comma?
Chrome is now blurring text when using transform translateY with percent
Lightbox image viewer positioning in CCS