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?
Related
I am new to CSS3 and working on a CSS3 code for blinking images. I just need to show an image with it blinking continually. I can't use a GIF image since the images come dynamically.
it's very simple... just use a CSS3 animation on opacity of the image
I hope this helps..
here is a working fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ or use following html
<html>
<head>
<style>
/* Firefox old*/
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
/* IE */
#-ms-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
/* Opera and prob css3 final iteration */
#keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.blink-image {
-moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation: blink normal 2s infinite ease-in-out; /* IE */
animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>
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.
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 added all the prefixes and still not working ?
It is like a slideshow that uses css to change the background to different images.
I don't understand what the problem is I looked everything over like 100 times.
You can see it on http://steveedwin.com/
html{
max-width:1000px;
}
#slideshow{
background-image: url('1.jpg') ;
background-repeat:no-repeat;
background-size: 70% 350px;
width:100%;
height: 300px;
animation:myfirst 30s linear 1s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 30s linear 1s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 30s linear 1s infinite alternate;
/* Opera: */
-o-animation:myfirst 30s linear 1s infinite alternate;
}
#keyframes myfirst
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-o-keyframes myfirst /* Opera */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
I have a keyframe animation and I believe IE 10 is the only IE browser capable of playing this animation. How could I go about removing this animation if the browser is IE and keeping it otherwise (Chrome, Safari, FireFox)?
The animation looks like this:
// Animations
#-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: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
}
.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
Fiddle
http://jsfiddle.net/mkerny45/6yYC9/
use conditional comments to turn the animations off. you'll need to use javascript to attach the cc's for ie10, and it should look like this:
<!--[if !IE]><!-->
<script>
// detect ie10, attach class of ie10 to html element
if(/*#cc_on!#*/false){document.documentElement.className+=' ie10';}
</script>
<!-->![endif]-->
<style>
.ie10 .animationclass{}
</style>
you can view gist here: https://gist.github.com/jalbertbowden/5174156
working demo of script here: http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html
i'v find IE10 does not read conditional comments anymore. .
so you can use jQuery:
if ($.browser.msie && $.browser.version == 10) {
$("html").removeClass("someClass");
}
or JavaScript:
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className ='';
}