I would like to know how to make a div play a CSS animation while hovering over it, and how to make it play the animation backwards when the mouse stops hovering over it. I already have my animation, generated with a handy online CSS keyframes animation generator program.
.element-animation{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
}
#-webkit-keyframes animationFrames {
0% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
All help greatly appreciated!
Add :hover to css class like this element-animation:hover
Check fiddle http://jsfiddle.net/PawelK/SF4Zy/3/ tested with Chrome
To trigger the CSS animation on the hover event, you will need to add an event listener via JavaScript.
document.querySelector('#div1').addEventListener('mouseenter', function(){
this.classList.add('element-animation');
});
Or, if you are using jQuery:
$('#div1').on('mouseenter', function(){
$(this).addClass('element-animation');
});
fiddle
Related
I have a set of boxes where each box has an animation:
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(0); }
100% { transform: scale(1); }
}
In order to create a waving flag effect, I use the animation-delay CSS property:
.pulsate1 {
-webkit-animation-delay: 2s;
}
.pulsate2 {
-webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */
These pulsateN classes are wrapped around each row of boxes.
There is some occasional flickering using this method, as seen in this fiddle. Is there another better solution?
The flickering occurs because CSS doesn't know what to do with scale of 0. Change it to something low like 0.001 and enjoy your smoothly-waving flag :)
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0.001) translateZ(0) }
100% { transform: scale(1) translateZ(0) }
}
(As mentioned by skyline You can add translateZ(0) to take advantage of the GPU)
scale() is a 2D transformation style. Try adding translateZ(0) or translate3d(0,0,0) to the animation. This will trick the browser into thinking it's doing 3D transformations and will offload the work to the GPU if available. I'm not seeing any flickering on Chrome 49.
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
Here's an article explaining the performance benefits of translate3d: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
Ok. I tried to search for this question. and it's very simple. I have a css swing animation working good in firefox but not in chrome. Of course, I added the webkit prefix. but still no luck. I changed the iteration count to infinite and finally it is working, but no I don't want it to run infinitely. Is this really a bug? does anybody find a solution? here's the link to the code I made in jsfiddle .. http://jsfiddle.net/7t1uvyup/2/ and here's the actual code.
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
I did some research.. CSS is Hardware-Accelerated..
So this is not just a weird random bug.
I ran into this problem just now. To me it seems that the animation takes place in very short period of time and many times it is not noticable to human eyes; i.e. Chrome does not respect animation duration parameter when webkit-animation-iteration-count is not infinite.
To me it doesn't seem to be a random bug. It is reliably reproducible.
Try visiting http://www.w3schools.com/css/css3_animations.asp with different browsers. Chrome shows the worst performance; CSS3 animation box does not animate; it just stays.
So I have this cute little spinner made to signify when something is loading. The perspective changes and the background color are supposed to change at the same time. I am having trouble getting the Transform and Transition timings to line up so that you don't see the color change, it needs to be already changed when the square flips so that it is a smooth transition.
Link to JS Fiddle
HTML
<div class="spinner"></div>
CSS
.spinner {
width: 20px;
height: 20px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
Two things to consider:
Transitions interpolate smoothly (well, according to the easing function) between keyframes.
If you do not specify an attribute at a keyframe, it will interpolate without interruption over that keyframe.
With those in mind, you can change the keyframes to apply your color change in the middle of your perspective change. In addition, you'll set two keyframes for the color change, very close to each other, to ensure the interpolation happens over a small time slice.
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
24.9% {background-color: #00b16a;}
25.0% {background-color: #f22613;}
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
74.9% { background-color: #f22613; }
75% { background-color: #aaabae; }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
Now, you'll notice that since you have the animation on infinite repeat, that you still get a color transition when the animation loops from 100% to 0%. You'll have to either specify animation-direction: alternate; or adjust your keyframes so that 100% ends at a reasonable tweening point between 100% and 0%.
DEMO using alternate
I have an onhover animation for a div called logo. I want the logo to tilt when the mouse is hovered over. However, I don't want the logo to go back to it's original state when the animation is finished, until someone moves their mouse out of the element (mouse out).
#logo:hover{
-webkit-animation-name:logorotate;
animation-name:logorotate;
-webkit-animation-duration:0.5s;
}
#-webkit-keyframes logorotate{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
}
}
If you want the hover to have a state, and that when someone hovers the change is smooth, that is a transition and not an animation
#logo{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#logo:hover{
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
Try something like this:
#logo.mousein{
-webkit-animation-name:logorotate;
animation-name:logorotate;
-webkit-animation-duration:0.5s;
}
#-webkit-keyframes logorotate{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
}
}
then add following jquery:
$(document).read(function(){
$("#logo").mouseover(function(){
$(this).addClass("mousein");
});
});
(Havn't tested the code yet, but schould work)
Here's the fiddle: http://jsfiddle.net/joplomacedo/mnj8n/
#-webkit-keyframes half-flip {
0% { -webkit-transform: rotateX(0deg); }
100% { -webkit-transform: rotateX(90deg); }
}
.half-flip-out {
-webkit-animation: half-flip 1s;
-webkit-transform: rotateX(90deg);
}
.half-flip-in {
-webkit-animation: half-flip 1s reverse;
-webkit-transform: rotateX(0deg);
}
I'm toggling the classes with jQuery. For some reason, .half-flip-in is doing exactly the same as .half-lip-out. I can't figure out why.
The problem does not lie in animation-direction. I'll explain more later so let's just dive into it for now.
Your CSS3 keyframes animation declarations should look like this instead:
#-webkit-keyframes half-flip {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(90deg);
}
}
#-webkit-keyframes half-flip02 {
0% {
-webkit-transform: rotateX(90deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
.half-flip-out {
-webkit-animation: half-flip 1s;
}
.half-flip-in {
-webkit-animation: half-flip02 1s;
}
As you can see in the above, there are 2 #-webkit-keyframes declarations - each being the direct opposite of the other. Note also that I removed -webkit-transform: rotateX(0deg); and -webkit-transform: rotateX(90deg); from both .half-flip-out and .half-flip-in. The reason is simple: It is already defined in the keyframes animation at 0%, which is the 1st frame, and at 100%, which is the last frame.
Next, you should clear up your jQuery. It is not necessary to use a counter to decide which class to add or remove from the DIV. Also, shorter codes in jQuery equates to faster execution. Always optimize your codes.
This is how your jQuery looks like:
var folding_img_wrap = $('.folding_img_wrap'),
toggle_count = 0;
$('.toggle').on('click', function() {
if (toggle_count % 2 === 0) {
folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
} else {
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
}
toggle_count++;
});
And this is how I recommend it should be:
var folding_img_wrap = $('.folding_img_wrap'),
$(".toggle").toggle(function(){
folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});
You can view my solution here.
Remember also to use the -moz- prefixes for your CSS3 declarations otherwise, this is only gonna be working on Chrome & Safari. Also note that keyframes isn't supported in IE9 or in Opera.