I am using this code to fade-in images when the page loads. Works fine in all browsers I have tested except from IE on Windows.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s;}
.fade-in.one {-webkit-animation-delay: 0.3s;-moz-animation-delay: 0.3s;animation-delay: 0.3s;}
.fade-in.two {-webkit-animation-delay: 0.6s;-moz-animation-delay:0.6s;animation-delay: 0.6s;}
.fade-in.three {-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;animation-delay: 0.9s;}
any ideas?
You are using this method and it has a warning for IE:
Warning! This CSS3 code will only work on Firefox, Chrome, Safari and
maybe newer versions of IE (after version 9)
Since IE9 doesn’t support css3 animations but does support opacity: 0;
property you will have to have ie9 load a separate ie9 css where you
have all your fade classes set to opacity: 1
If you are looking for alternative:
Method 1:
If you are looking for a self-invoking transition then you should use CSS3 Animations, they aren't supported as well but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JS, see third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JS (not in demo)
document.getElementById("test").children[0].className += " load";
Demo
http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers, IE 6+: http://jquery.com/browser-support/
jQuery 2.x: All modern browsers, IE 9+: http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS3 transitions or animations.
Source
Try to add the prefix -ms- like -ms-animation-delay.
Because you have just specify the prefix -moz- for mozilla and -webkit- for chrome.
Related
I am working on a new website, but when my friend tested it on firefox one of the features was not working.
We found out the css is not working in firefox but it does work in Chrome.
The whole code: https://jsfiddle.net/wvkL6d2b/
We tried
-webkit- and -ms-
#separator{ width: 10px!important; max-width: 60px!important; height: 10px; background:red;}
#keyframes in-out {
from { width: 10px;
}
10%, 100% {
width: 60px;
}
to{ width: 60px; }
}
#separator {
animation-name: in-out;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}
I am trying to get it to work on both browsers
There are so many mistakes in the CSS properties you have written. Please find the updated code here in fiddle.
These are supposed to be properties to use.
#separator {
height: 10px;
background: red;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
#-webkit-keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
/* Standard syntax */
#keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
It's not working because you have declared the wrong property.
The declaration you need for firefox is just animation. Only Chrome and Safari need the -webkit- prefix for this CSS3 effect.
So your code would be:
-webkit-animation:slideshow 21s infinite;
animation:slideshow 21s infinite;
Ref:
http://www.w3schools.com/css3/css3_animations.asp
I'm fading in two objects on a very simple page. First the logo, then the text. Why is the animation on the text not delaying with this code? The other one works flawlessly, but it doesn't have any delay.
.centralimg {
background-image: url(logo.png);
background-size: 576px 173px;
width: 576px;
height: 173px;
animation: fadein 1200ms;
-moz-animation: fadein 1200ms; /* Firefox */
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-o-animation: fadein 1200ms; /* Opera */
}
.centraltext {
color: rgb(147, 145, 147);
font-family: 'Nunito', sans-serif;
font-size: 8pt;
margin-top: 25px;
animation: fadein 1200ms;
animation-delay: 3s;
-moz-animation: fadein 1200ms; /* Firefox */
-moz-animation-delay:3s;
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-webkit-animation-delay:3s;
-o-animation: fadein 3200ms; /* Opera */
}
Your code is correct, but you must add some property to the .centraltext, because it should not be visible until the animation is applied (opacity: 0 in JSFiddle example).
And also add the property animation-fill-mode to preserve the style of the last frame.
Example: JSFiddle
.centraltext {
...
opacity: 0;
animation-fill-mode: forwards;
}
It will delay two seconds, then start the animation. It can be useful.
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
My map loads icons from the API while scrolling around. The delay makes the markers pop into existence, which I don't like visually. Preferably, they would grow from a pixel to their normal size or fade in. I figured fade in wouldn't be too hard to do with css3 transitions. Markers have the method setOpacity(n) so I tried initializing the marker like
#marker = L.marker(
coordinates,
{opacity: .1}
).on('add', ->
#setOpacity(1)
)
because I realized adding a marker was async so if I set the opacity too early, the transition wouldn't apply because the marker element wasn't in the DOM and the marker would render at full opacity. This is why I tried listening to the add event. But that doesn't work. apparently the event fires too early. If i put setOpacity in a timeout, it works fine. But I do not think that is a good way to write this, especially because it introduces even more delay on top of the API.
How can I fade in my icons? I think a lot of people want this feature, so maybe it would be a good leaflet plugin.
This can be done by attaching a keyframe animation to the leaflet-marker-icon and leaflet-marker-shadow classes. The keyframe animation is what does the trick because it's selfinvoking, so you don't need to add any classes at runtime to start the animation. Animation works when the map is loaded with markers and when markers are added. Try the example below the code:
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
An example on Plunker: http://plnkr.co/edit/kw4zFqqbtfEFQzN4fg8U?p=preview
I've made my backgrounds fade in with CSS3 here: http://www.cphrecmedia.dk/musikdk/stage/artistchannel.php
It works fine, but not in Firefox (newest beta).
The funny thing though is that my small pulse animation works fine:
http://www.cphrecmedia.dk/musikdk/stage/chat.php
So it seems its the opacity-animation which wont work.
This is my code:
.fadeIn{
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
Anyone who knows whats wrong?
I'm working on a CSS3 Keyframe Animation with a skew() transform. I was able to achieve the result I was looking for in Safari 6. However, when I view the page on another Webkit browser, Chrome I am getting a different animation result.
Here is my code:
HTML
<div id="test">
webkit animation test
</div>
CSS
#test {
position: absolute;
left: 200px;
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
-webkit-animation-name: testBox;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate; /* alternate, normal */
-webkit-animation-play-state: running;
}
#-webkit-keyframes testBox /* Safari and Chrome */ {
0% {
-webkit-transform: skew(70deg,0deg);
}
100% {
-webkit-transform: skew(-70deg,0deg);
}
}
Anyone else have this issue?