I'm animating a page and it ends with a image transition that covers the entire page. Once it gets to that point I want the animation to stop on the last frame and leave the iamge over the entire page. I tried using
animation-fill-mode: forward;
but that isn't correct according to Webstorm, and it does nothing in JsFiddle.
Here is what I have so far.
//jsfiddle.net/wundersoy/kkk53jx6/1/embed/"></script>
The correct syntax is animation-fill-mode: forwards not forward.
The property is also not supported in Internet Explorer 9 or earlier
http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
You can try to set the element position:absolution.
Related
I would like to add a transition on an element when I am changing its position (from static to fixed).
I tried doing a transition: transition: position 2s linear; but it actually doesn't do anything. Is there anything else I could try ?
Thanks
You're using the declaration properly, however you can only transition numeric values - this is because transition will calculate inbetween steps for the two values you're transitioning between, and while 0% and 100% have steps inbetween, there is no valuefor three-quarters-fixed-one-quarter-static.
The working draft for the transition shorthand has a few pointers on what can reasonably be animated.
In other words, you won't be able to animate this with transition, so the only possible way is likely through JS at this point. With the code you provided, that is impossible to say, though.
We are running into a weird bug with disappearing elements in the new Firefox (version 34.0.5).
The bug occurs on a page with two (or more) flash objects that are before an other element in the html. Whenever the page is loaded, the element just disappears.
You can see it in this demo:
FF 34 Flash Bug
Just open it in the newest Firefox and you will see the red div disappearing. Every repaint of that page will display it again, e.g switching the browser tab or editing the css via dev tools.
When it does work normally
- One flash file - no matter the position
- Having all flash files after the element in the html
- Having one flash file below and one flash file above the other element (html structure)
What we tried - what it produces
- Repainting the page after flash files are loaded (we are using SWFObject for adding the flash files, but we are not able to attach a load event to the files) - works on the first load of the page (cache clear), doesn't work after refreshes (F5).
- After the page is loaded, scrolling, resizing, changing tabs helps - element is then visible (in some cases)
- Creating an element with width/height with js at the end of the document - helps on first load, after refreshes it doesn't work.
- Animating with css the opacity of the object infinite (we have a wrapper around the flash files and animate this one) - works (not a permanent solution)
- Swf object with a "wmode" other than "transparent" works (not an acceptable solution for us)
What we know
- Bug happens only when MORE THAN ONE FLASH FILE is beneath the element
- Bug happens on flash versions 15 and 16 (these are tested)
- Bug happens in mozilla 34.0.5 (this one is tested)
- Multiple elements after the flash files will also disappear
- When you open the page for the first time, it doesn't show the element. If you then refresh (F5) multiple times, in some cases it will show everything normally, and in some cases it doesn't show the element nor one or both flash files that are overlapping.
Current solution
A constant browser repaint of the disappearing element (or elements!). We do this with a simple CSS3 animation that animates the opacity infinitely between 0.97 and 1 with the duration of 1s.
JavaScript:
if( navigator.userAgent.match(/Firefox\/3[4-9]/i) ){
$('.animation').addClass('firefox34FlashBug');
}
CSS:
.firefox34FlashBug {
animation: 1s linear 0s firefoxFix infinite;
}
#keyframes firefoxFix {
0% {
opacity: 0.97;
}
100% {
opacity: 1;
}
}
That is a very hacky and not a nice solution, but the only "fix" we could find that doesn't change the structure of the html (we need multiple flash files below other elements in our project).
Did anyone else ran into the same problem? We know a couple ways to deal with that behaviour, but we can't explain it yet.
Thank you very much in advance! I hope that we can find a good way of dealing with this problem and that we can find an explanation for the new ninja elements in FF 34 ;-).
Update #1:
Applying border: 1px solid transparent; to a container around every object is fixing it in the demo (also see comments in the answer from akmozo).
This worked for me:
Added to CSS:
.firefox34FlashBug {
animation: 1s linear 0s firefoxFix infinite;
}
#keyframes firefoxFix {
0% {
opacity: 0.97;
}
100% {
opacity: 1;
}
}
Added class="firefox34FlashBug" to my container div outside flash
Note: The demo URL "FF 34 Flash Bug" isn't working, you need to add "index.html" to it. IE http://quickbm.com/ff34flashbug/index.html
Thanks for the fix.
I think that the problem is because your swf objects have absolute positions.
So to avoid this problem, you can put your swf objects into a container and you can use z-index to select it's depth
compared the other elements :
CSS :
.ninja-element {
z-index: 2;
position: absolute;
...
}
.objects {
z-index: 1;
position: absolute;
...
}
HTML :
<div class="objects">
<object>
...
</object>
<object>
...
</object>
...
</div>
<div class="ninja-element">
Watch me disappear in FF 34!
</div>
I had the same problem, but for me it worked to force the browser to repaint just once. After all the SWF Objects are added, I added this line (everything inside of $(document).ready(function() ):
$('#wrapper').css("transform", "scale(1)");
Where #wrapper is a div around the disappearing elements. Scale(1) forces a repaint, but should not change anything about the design (unless you use scale for that element already).
edit:
or maybe better: $('#wrapper').css("-moz-transform", "translatez(0)");, because this will also force a repaint, but only in Firefox.
Just throwing this in there for anyone else.
FF craps the bed when you have a position: fixed element inside a parent element that has been shifted around with left (or something).
To fix this. Shift your parent element around with translate instead.
Spent hours trying to get one of these hacks to work before figuring this out... :(
I have animated some of the elements on my page that I am currently working on, and I have assigned an animation-delay for it, so it can show a bit later on. In chrome everything is okay, it gets the assigned value of 1s. But in all other browsers it is being delayed for 2.5 to 3 seconds. How can I fix this?
Here is a reduced case fiddle:
http://jsfiddle.net/sqnkov/E22ZK/
.delayed {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
P.S>
I have read the MDN post about it being a experimental thingy, but stil - is there a workaround for this issue?
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
The 5seconds comes from .fadeIn which only affects other browsers than Chrome and Safari because you didn't specified a delay for -webkit-
So if what happens on Chrome is what you want, just remove animation-delay: 5s
http://jsfiddle.net/E22ZK/2/
I have a Ul tag on hover of it, I display a div using css.
Now i want that div tag will 1st fadein or any other effect like animate etc.
I know it can be done easily by using jQuery, but want to know can i achieve this using Html5,css3,css
Here JsFiddle
Fading in http://jsfiddle.net/thebabydino/Cedue/7/
There was never anything like -webkit-opacity or -moz-opacity
If you want to transition the opacity, then either write
transition: opacity 1s
or
transition: 1s
From what I can tell, removing the display: none; and display: block; lines from your code enables animation:
http://jsfiddle.net/Cedue/31/
(That is a copy of your original fiddle with only the display: lines removed.) However, this raises the issue that you can access, highlight, and even hover the text when it's hidden; if you do not wish to have that behavior you might wish to look into another means of hiding it until the correct area is hovered, such as shifting it with margins.
As Ana has mentioned, as well, if you wish to animate the entire fade you should use opacity as your transition parameter (e.g.: transition: opacity 1s ease;, with the additional lines for separate browser support). If you use background as the transition property as you do in your example, only the background fades and the text appears instantly.
EDIT: due to my own curiosity I tested this under Chrome and Firefox, each for both Windows and Mac, and can confirm that removing the display lines caused the animation to work on all of them.
Check this site, it uses css and javascript.
Pure CSS implementation here.
You should look into CSS3 transitions http://www.alistapart.com/articles/understanding-css3-transitions/
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.