I am trying to write a simple CSS crossfade animation that transitions between 4 different images, but it does not work in any version of Firefox (I am testing this on v.30), Internet Explorer, or Opera. It works just fine in Chrome and Safari, though.
I have looked all over and seen similar problems, but sadly no solutions that work. What is very odd is that I had a MUCH more complex crossfade animation that worked and transitioned between images using both ease-in and ease-out and that worked just fine on all browsers. (I may post it for reference later)
I have tried this both with and without the markups for individual browsers with the same results. Also, I heard that the generic markups should always go last, but doing so yields the same result.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="crossfade.css">
</head>
<div id="crossfade">
</div>
</html>
CSS:
#crossfade {
width: 1000px;
height: 200px;
-webkit-backface-visibility: hidden;
-webkit-animation: myfirst 30s infinite; /* Chrome, Safari, Opera */
-moz-animation: myfirst 30s infinite ;
-o-animation: myfirst 30s infinite;
-ms-animation: myfirst 30s infinite;
animation: myfirst 30s infinite;
}
#-webkit-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
#-moz-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
#-o-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
#-ms-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
#keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
Per Rob's advice, here is what I did using figure tags instead of div. It looks almost exactly the same as the animations, but works in IE, Firefox, Chrome, Opera, and Safari. (I did not, however, test this on versions of IE earlier than 8).
HTML:
<html>
<head>
<title>Site</title>
<link rel="stylesheet" type="text/css" href="crossfade.css">
</head>
<div id="xfade">
<figure>
<img src="Summer/images/summerbg1.png" />
</figure>
<figure>
<img src="Summer/images/summerbg2.png" />
</figure>
<figure>
<img src="Summer/images/summerbg3.png" />
</figure>
<figure>
<img src="Summer/images/summerbg4.png" />
</figure>
</div>
</html>
CSS:
#xfade{
position: relative;
max-width: 1000px;
height: 200px;
margin: 0 auto;
}
#xfade figure{
margin: 0 auto;
max-width: 1000px;
height: 200px;
position: absolute;
}
#xfade img{
width: 1000px;
height: 200px;
}
#xfade figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 0s infinite;
-moz-animation: xfade 48s 0s infinite; /* Firefox */
-webkit-animation: xfade 48s 0s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 0s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 12s infinite;
-moz-animation: xfade 48s 12s infinite; /* Firefox */
-webkit-animation: xfade 48s 12s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 12s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 24s infinite;
-moz-animation: xfade 48s 24s infinite; /* Firefox */
-webkit-animation: xfade 48s 24s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 24s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 36s infinite;
-moz-animation: xfade 48s 36s infinite; /* Firefox */
-webkit-animation: xfade 48s 36s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 36s infinite;
}
#-webkit-keyframes xfade{ /* Safari and Chrome */
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
#-moz-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
#-o-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
#-ms-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
#keyframes xfade{
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
Related
I'm trying to set up an animation where a title fades in first and after a delay the subtitle fades in. The title is working fine, but once the subtitle fades in it disappears completely.
It was working fine until I added the delay to the subtitle and now once the subtitle fades in it disappears completely. The best answer I've found is to add animtion-fill-mode: forwards; but I've already done that. How can I fix this to have the text stay after fading in?
This is what I have right now:
.fade-in-text-sub {
font-size: 50px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
animation: fadeIn linear 3s;
animation-fill-mode: forwards;
-webkit-animation: fadeIn linear 3s;
-moz-animation: fadeIn linear 3s;
-o-animation: fadeIn linear 3s;
-ms-animation: fadeIn linear 3s;
animation-delay: 1s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
This is a cascading issue. The order in which you declare your animation is being overwritten.
animation-fill-mode is definitely the way to go, but adding animation after this will overwrite the fill-mode back to none, since animation is a shorthand key, which can contain several properties more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#configuring_the_animation
so you can include fill-mode in the same declaration.
For reference I left in the sub title example the animation-delay outside of the animation property, but since it is set after, it is not reverted back to its default value of 0s.
.fade-in-text {
font-size: 70px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
-webkit-animation: fadeIn linear 3s forwards;
-moz-animation: fadeIn linear 3s forwards;
-o-animation: fadeIn linear 3s forwards;
-ms-animation: fadeIn linear 3s forwards;
animation: fadeIn linear 3s forwards;
}
.fade-in-text-sub {
font-size: 50px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
-webkit-animation: fadeIn linear 3s forwards;
-moz-animation: fadeIn linear 3s forwards;
-o-animation: fadeIn linear 3s forwards;
-ms-animation: fadeIn linear 3s forwards;
animation: fadeIn linear 3s forwards;
animation-delay: 1s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
<h1 class="fade-in-text">fade-in-text</h1>
<h2 class="fade-in-text-sub">fade-in-text-sub</div>
I have created a simple loader using css. Is's working fine in other browsers but its fluctuating in IE 11 / Edge.
Here I have one loader div in html:
<div class="loader"> </div>
Here is my css for loader:
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Here is fiddle:
Fiddle
Try this
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
-ms-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-webkit-keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-moz-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-ms-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-o-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
Check it on fiddle
I'm trying to use this code for a website.
I'm using CSS3 Keyframe and animations for it with a simple list
#animation ul { /* The list with elements */
position: relative;
text-align: center;
width: 200px;
}
#animation li { /* Common styles for the list elements */
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
background-color: lightgreen;
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
background-color: yellow;
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
background-color: lightblue;
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
/* Defines the animation keyframes */
#-webkit-keyframes fadein {
0% { /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */
opacity: 0;
}
66% { /* Actual beginning of the fade in animation */
opacity: 0;
}
76% { /* The fade in animation takes 10% of the duration time */
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
I want to set 5 elements instead of 3 but when I edit this code with 5 elements, it's not the same result..
Thanks for the help !
You have to change the time intervels that you have mentioned . Check the below code.
#animation ul { /* The list with elements */
position: relative;
text-align: center;
width: 200px;
}
#animation li { /* Common styles for the list elements */
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
background-color: lightgreen;
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
background-color: yellow;
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
background-color: lightblue;
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
#animation li:nth-of-type(4) { /* fourth element of the list */
background-color: pink;
-webkit-animation: fadein 6s ease-in-out 8s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 8s infinite alternate;
animation: fadein 6s ease-in-out 8s infinite alternate;
}
#animation li:nth-of-type(5) { /* fifth element of the list */
background-color: red;
-webkit-animation: fadein 6s ease-in-out 12s infinite alternate;
-moz-animation: fadein 6s ease-in-out 12s infinite alternate;
animation: fadein 6s ease-in-out 12s infinite alternate;
}
/* Defines the animation keyframes */
#-webkit-keyframes fadein {
0% { /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */
opacity: 0;
}
66% { /* Actual beginning of the fade in animation */
opacity: 0;
}
76% { /* The fade in animation takes 10% of the duration time */
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
<li>example</li>
<li>here</li>
</ul>
</div>
Playing around with CSS 3 animations but for some reasons, all animations return to their original state after execution.
In this case I'd like the image to remain at scale(1) after animation and my text to oly appear after img animation but stay afterward.
.expanding-spinning {
-webkit-transform: scale(.4);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
animation-duration: 500ms;
}
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out alternate;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg) scale(.4);}
100% { -webkit-transform: rotate(360deg) scale(1);}
}
#-keyframes spin2 {
0% { transform: rotate(0deg) scale(.4);}
100% { transform: rotate(360deg) scale(1);}
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.slogan {
display: block;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.5s;
}
Fiddle code
You need to add the rule -webkit-animation-fill-mode: forwards; to your animations.
Also, regarding the text animation: Animate the visibility property instead of display property
FIDDLE
.expanding-spinning {
-webkit-animation: spin2 1.4s ease-in-out;
-moz-animation: spin2 1.4s linear normal;
-o-animation: spin2 1.4s linear;
-ms-animation: spin2 1.4s linear;
animation: spin2 1.4s ease-in-out alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
#-webkit-keyframes fadeInFromNone {
0% {
visibility:hidden;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.slogan {
visibility:hidden;
opacity: 1;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-delay: 3.4s;
-webkit-animation-fill-mode: forwards; /* <--- */
}
See this article for a nice explanation of all the animation properties
The fill mode. If set to forwards, the last keyframe remains at the
end of the animation,
(from above link)
So I'm trying to animate some text dropping down once its finished animating.
The problem is it just disappears after it's finished, even though I set the opacity to 1# 100%.
/* text animation */
#-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
10% {
opacity: 1;
-webkit-transform: translateY(0%);
}
20% {
opacity: 1;
-webkit-transform: translateY(0%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
.text-animation {
z-index: 1000;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 2s linear 2s;
-moz-animation: textAnimation 2s linear 2s;
-o-animation: textAnimation 2s linear 2s;
-ms-animation: textAnimation 2s linear 2s;
animation: textAnimation 2s linear 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
/* text animation */
I just don't understand what the problem is here...
This worked for me.
If you set the end state in the class and not add a delay.
#-webkit-keyframes textAnimation {
0% { opacity: 0; -webkit-transform: translateY(-200%); }
33% { opacity: 1; -webkit-transform: translateY(-200%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}
In you .text-animation declaration add this :
-webkit-animation-fill-mode: forwards;
Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).
You can see the result here : http://codepen.io/joe/pen/CkbcL
Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode