I have a Div with the id of center. I set the opacity of the Div to 0 in CSS file. when the window loads, I give the Div an animation:
document.getElementById('center').style.animation = "UP 1s forwards";
if the user click a button, I change the animation to:
document.getElementById('center').style.animation = "DOWN 1s forwards";
Problem: the second animation doesn't show up, the Div suddenly disappear.
A example fiddle or some more code might help. Lot of things could be wrong.
Your keyframes for the down animation might be starting with opacity 0;
You need to set some position property in CSS to use top/right/bottom/left properties. Check that.
There might be something wrong with the JS on click.
Just some things I can think of.
It feels like a toast animation by what you described. Here's a fiddle.
https://jsfiddle.net/thelessergeek/rj7a06hm/
Hopefully you were looking for that. My JS might be a little sad. Work it out as you see fit. Thanks!
Related
I am trying to create two buttons that will move up when clicked. My problem is that after the animation occurs, the hover animation for the buttons no longer work. From my research I have gathered that it is something to do with animation-fill-mode: forward but I have found no solution that will allow the buttons to animate properly. Here is my relevant code
https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon
Forward animations will cause the element to retain the style values from the last keyframe when the animation ends. Simple remove the animation-fill-mode attribute and your hover animation should work.
Im gonna take a random stab. There is a severe lack of info here...
On hover, set animation-name or I guess maybe animation-fill-mode to none.
.elem:hover {
whatever: settings-you-want;
animation-name: none;
}
I just did something similar.
The animation will take priority over hover.
I'm trying to add an effect where if you click a button it blurs the background, but the original problem was that the edges where white for some reason, so i pushed them out by using negative margins which worked, but then when i tried to animate the blur and the edges seem to came back then disappear when the animation is done causing a flickering effect?
Jsfiddle: https://jsfiddle.net/xq2ohL4x/
$(function(){
$("#clickme").click(function(){
setTimeout(function(){
$(".image").css("-webkit-filter", "blur(18px)");
},1000);
});
});
Any ideas?
Thanks in advanced :)
See if this works for you. Change your transition to this.
transition: 2s -webkit-filter linear;
When my grid of post loads, the posts load at position zero. Then translate3d/width grab their values and they go to right place: http://www.marianoshoes.com/the-journal/
How can I disable this weird javascript/css animation, using css?
Thanks!
Seems to me that it doesn't do any animation but that the sequence is just off, like the CSS is added after the items are already drawn on screen.
If you're adding the CSS classes to the elements using JS you could fix this by defaulting the display property to none, and at last change it to block (This will make it take a little longer for it to display the information, but at least it's in the correct format.
Else you can change this by making sure your CSS is going to be one of the first things to get loaded into the page, and make sure your JS is getting run only after the document is fully loaded.
You can't stop the js from moving the blocks into their right place, but you can fade in the element after your js.
Your css:
.post-grid {
opacity: 0;
transition: opacity 0.5s;
}
.post-grid.loaded {
opacity: 1;
}
Your js:
$(document).ready(function() {
var $postGrid = $('.post-grid');
.... do stuff to post grid
$postGrid.addClass('loaded')
});
I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help
skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations
Simply added a class on hover, and removed the class on mouse off.
This is the jsFiddle. What I would like is stop the box when it reaches its end position. I know there is a transition function available also but that does not seem to work. Are all animation functions type also available for transition? I am using rotate function in my actual work.
Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).
I've updated the fiddle: http://jsfiddle.net/nTG42/2/
More information is provide by the MDN: https://developer.mozilla.org/en/css/css_animations
Remove the infinite from animation:mymove infinite; and set the final place as top:200px. Demo