I think from my current reading up on documentation and google related searches that IE 9 doesn't like opacity... I have this css and wanted to know why IE 9 doesn't like it... can anyone add to my understanding on this?
#logo-title{
background-image: url("../images/mthc/logo-whole.png");
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 250px;
border: 0 ;
height: 180px;
width:780px;
z-index : 2500;
opacity:0;
EDIT :- Further reading concludes that the below code is actually the problem as ie9 doesn't support all the good stuff in css3 .... a js alternative needs to happen but unable to get this code to work...
$("#logo-title").fadeIn();
-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;
-webkit-animation-delay: 11s; /* Chrome, Safari, Opera */
animation-delay: 11s;
-moz-animation-delay: 11s;
-ms-animation-delay: 11s;
-o-animation-delay: 11s;
animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
EDIT - I FORGOT TO INCLUDE THE FADEIN ANIMATION ...
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
It seems to me that CSS3 Animations aren't supported in IE9 and you need to use a fallback, such as Modernizr - as mentioned in this thread: Using CSS3 Animations in IE9+
Related
I'm trying to achieve Marie Forleo's homepage effect just with css. But all my elements fades at the same time. How can i fade it one by one?
Here's what i want to accomplish: https://www.marieforleo.com/ (Fade in effect of banner)
Here's my code:
test h1 {
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s; /* Firefox < 16 */
-ms-animation: fadein 5s; /* Internet Explorer */
-o-animation: fadein 5s; /* Opera < 12.1 */
animation: fadein 5s;
}
#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; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Thank you guys for your help!
You can use animation-delay to delay animations. Here is a JSFiddle where you can see what you need.
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
.fadeInAnimated {
opacity: 0;
animation: fadeIn 2s forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */
}
#second {
animation-delay: 2s;
}
#third {
animation-delay: 4s;
}
<ul>
<li id="first" class="fadeInAnimated">This first</li>
<li id="second" class="fadeInAnimated">Then this</li>
<li id="third" class="fadeInAnimated">And lastly this</li>
</ul>
If you know how many items you're going to fade in, you could set a staggered animation-delay property on each one.
.item_01 {
animation-delay: 1s;
}
.item_02 {
animation-delay: 2s;
}
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
Not sure if you're looking for a jQuery solution (you mention css, but you've also tagged jquery) but this will work as well.
You can use 1 selector and call fade in, then in the callback call fadeIn with another selector. By the way, if the pre-sets for fade in ("slow", "fast") don't work for you you can specify numbers in milliseconds.
$( ".item_01" ).fadeIn( "slow", function() {
$(".item_02").fadeIn("slow");
});
http://api.jquery.com/fadein/
I am trying to fade out an element, keep that element faded out for, say, 5 seconds, then fade back in the element. I am trying to achieve this using only CSS and not jQuery.
Currently I have set two elements to start fading after 2 seconds, have a fade duration of 2 seconds and then reappear as soon as the duration ends.
Here's a fiddle.
And the code:
CSS:
.hideMe1{
animation:hideMe 0.5s 1;
-webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay:2s; /* Pause before fade */
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-fill-mode: backwards; /* End by showing the content */
}
.hideMe2{
animation:hideMe 0.5s 1;
-webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay:2.5s; /* Pause before fade */
-webkit-animation-delay:3s; /* Safari and Chrome */
-webkit-animation-fill-mode: backwards; /* End by showing the content */
}
#keyframes hideMe{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes hideMe{
from {opacity :1;}
to {opacity :0;}
}
HTML:
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
How can I make each element stay faded for 5 seconds (for example), before reappearing?
For achieving that effect, you would have to modify your keyframes like in the below snippet.
Set the animation-duration such that it is the total time for the fade-out + pause + fade-in. Here I have set the duration as 10s (2.5s for fade-out + 5s pause + 2.5s for fade-in).
Set the keyframe percentages to match the expected durations like below:
At 25% mark (which is nothing but 2.5s of 10s) change the opacity from 1 to 0.
A 5s pause period is nothing but 50% of 10s and so make the element hold its state till the 75% mark. It is critical that the 75% keyframe is also added (even though the element stays in the state) because otherwise the element would start fading-in from the 25% mark itself.
Starting at the 75% mark, make the element's opacity change gradually from 0 to 1 and thereby producing the fade-in effect.
Note: I have removed the vendor-prefixed versions of the properties to keep the demo simple and I've also removed the repetitive declaration of animation-fill-mode and -webkit-animation-fill-mode as at any point of time only one would be used by a browser. Webkit browsers would use the prefixed one as it appears last whereas other browsers would use the unprefixed one (and thus would result in cross-browser differences).
.hideMe1 {
animation: hideMe 10s 1;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.hideMe2 {
animation: hideMe 10s 1;
animation-fill-mode: forwards;
animation-delay: 2.5s;
}
#keyframes hideMe {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
You'll have to manually use the keyframes to time the animation. Take a look at this:
.hideMe1 {
animation: hideMe 5s 1;
-webkit-animation: hideMe 5s 1;
/* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay: 2s;
/* Pause before fade */
-webkit-animation-delay: 2s;
/* Safari and Chrome */
-webkit-animation-fill-mode: backwards;
/* End by showing the content */
}
.hideMe2 {
animation: hideMe 5s 1;
-webkit-animation: hideMe 5s 1;
/* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay: 2.5s;
/* Pause before fade */
-webkit-animation-delay: 3s;
/* Safari and Chrome */
-webkit-animation-fill-mode: backwards;
/* End by showing the content */
}
#keyframes hideMe {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1
}
}
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
#keyframes hideMe{
0% {opacity :1;}
10% {opacity :0;}
90% {opacity: 0;}
100% {opacity: 1}
}
Then set your animation speed to something like 7s.
Can somebody tell me why blink effect is not working chrome browser
<p class="blink">at least it's not Comic Sans</p>
<style>
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#keyframes blink {
80% {
visibility: hidden;
}
}
</style>
And also I require this to work on every iOS and Android devices. Please suggest.
You are missing -webkit prefixes for animation and keyframes.
First of all, for reference, please do try out this:Tryit from W3School
Especially in chrome, things such as animation, transformation requires -webkit prefix. After reading my reference, you should be able to do it yourself.
But here is the solution anyway. See result here: JSFiddle
.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#-webkit-keyframes blink {
80% {
visibility: hidden;
}
}
#keyframes blink {
80% {
visibility: hidden;
}
}
You now can go on and read more about prefix (simply search about it google)
So I've got some text inside a < div > tag and I want it to animate. Now I want the text to start from a low opacity and then have the opacity increase as time passes. I've found an easy way for it to DECREASE but I find it near impossible to make it start from that state and do it backwards since if I change the opacity attribute on my < p > the < div > will always treat the < p > at that opacity.
My code (chrome):
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
HTML:
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
This? Live demo here (click).
.doge1 > p {
opacity: 0.4;
}
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:0.4}
25% {opacity:0.4}
50% {opacity:0.7}
75% {opacity:0.8}
100% {opacity:1}
}
.doge1:hover > p {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Not sure if this is your desired effect, but you could achieve this a little easier with:
.doge1 {
opacity: .4;
transition: all 2s;
}
.doge1:hover {
opacity: 1;
}
http://jsfiddle.net/JFA7g/
I have a small animation that is working in firefox, but not in webkit browsers. Maybe someone sees the mistake cause i've looked for an hour... It is part of a impress.js presentation, similar to prezi.
Thanks!
css:
#its.step.present h5{
display: inline-block;
position:absolute;
animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-webkit-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#-moz-keyframes aia2{
0%{
left:120px;
-moz-transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
-o-transform:scale(1) rotate(0deg);
transform:scale(1) rotate(0deg);
color: red;
}
90%{
left: 580px;
-moz-transform:scale(1) rotate(2000deg);
-webkit-transform:scale(1) rotate(2000deg);
-ms-transform:scale(1) rotate(2000deg);
-o-transform:scale(1) rotate(2000deg);
transform:scale(1) rotate(2000deg);
}
100%{
left: 580px;
}
}
html:
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>
<ul>
<li>Web Development,</li>
<li>Web Design,</li>
<li>Log<h5>o</h5> Design,</li>
<li>Web Marketing,</li>
</ul>
<ul class="doua">
<li><h6>e</h6> Commerce,</li>
<li>CMS (WP, J, D),</li>
<li>Cust m Apps</li>
<li>and others.</li>
</ul>
</p>
</div>
You have to put the general animation rule after the browser specific ones:
-webkit-animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
animation: aia2 5s linear infinite alternate; /* this comes last */
And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:
#-moz-keyframes aia2{
...
}
#-webkit-keyframes aia2{
...
}
#-o-keyframes aia2{
...
}
Chrome v43 dropped the -webkit- prefix for animation so if this worked before but not now, that's probably why.
One thing to check if you're developing in Firefox is Firefox will take an animation-name in quotes, but Chrome/Edge/Safari/Webkit will not.
Acceptable ONLY in Firefox:
animation-name: 'theAni';
Acceptable in all browsers (Chrome, Edge, Safari & Firefox):
animation-name: theAni;
for each property that you want add animation you need first determine its value then you can change it in keyframe.
here is a simple code that you can try it:
<!DOCTYPE html>
<head>
<style>
#forTest {
display: inline-block;
background-color: darkcyan;
width: 500px; /* here we determine the value of property that we want add animation */
height: 30px;
animation: a1;
animation-fill-mode: forwards;
animation-duration: 5s;
}
#keyframes a1{
to {
width: 100px;
}
}
</style>
</head>
<body>
<div id="forTest"></div>
</body>
</html>