I am trying to crossfade multiple headings to create a welcome message in three languages. I overlapped the headings and first the welcome message in englih should appear, then fade out and the italian welcome message appears, then this one fades out and the spanish message appears...and the animation repeats. Sort of like the Apple iOS welcome message in different languages. I am having trouble understanding how to manage the times of the animation in order for this to happen and the messages not to clash at the same time.
here is my code:
https://jsfiddle.net/1p7z4v0e/
<h1 class="text-animated-one">Welcome</h1>
<h1 class="text-animated-two">Benvenuti</h1>
<h1 class="text-animated-three">Bienvenidos</h1>
/* Welcome Message FadeIn Effect */
/* Keyframes */
/* Chrome */
#-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
/* Firefox */
#-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.text-animated-one, .text-animated-two, .text-animated-three {
position: absolute;
}
.text-animated-one
{
opacity:0;
-webkit-animation:fadeIn ease-in 1s infinite;
-moz-animation:fadeIn ease-in 1s infinite;
animation:fadeIn ease-in 1s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:10s;
-moz-animation-duration:10s;
animation-duration:10s;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.text-animated-two
{
opacity:0;
-webkit-animation:fadeIn ease-in 20s infinite;
-moz-animation:fadeIn ease-in 20s infinite;
animation:fadeIn ease-in 20s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:10s;
-moz-animation-duration:10s;
animation-duration:10s;
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
animation-delay: 20s;
}
.text-animated-three
{
opacity:0;
-webkit-animation:fadeIn ease-in 20s infinite;
-moz-animation:fadeIn ease-in 20s infinite;
animation:fadeIn ease-in 20s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:10s;
-moz-animation-duration:10s;
animation-duration:10s;
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
animation-delay: 40s;
}
Since you are cycling between three options you can set up your animation to display for one third of the time. Then you can set the duration of all three animations to be the same and just offset the second and third animations by one third and two thirds, respectively. Here's an example on how to do this.
/* Welcome Message FadeIn Effect */
/* Keyframes */
/* Chrome */
#-webkit-keyframes fadeIn {
0% { opacity:0; opacity: 1\9; /* IE9 only */ }
33% { opacity:1; }
66% { opacity: 0 }
}
/* Firefox */
#-moz-keyframes fadeIn {
0% { opacity:0; opacity: 1\9; /* IE9 only */ }
33% { opacity:1; }
66% { opacity: 0 }
}
.text-animated-one, .text-animated-two, .text-animated-three {
position: absolute;
}
.text-animated-one
{
opacity:0;
-webkit-animation:fadeIn ease-in 9s infinite;
-moz-animation:fadeIn ease-in 9s infinite;
animation:fadeIn ease-in 9s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.text-animated-two
{
opacity:0;
-webkit-animation:fadeIn ease-in 9s infinite;
-moz-animation:fadeIn ease-in 9s infinite;
animation:fadeIn ease-in 9s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
.text-animated-three
{
opacity:0;
-webkit-animation:fadeIn ease-in 9s infinite;
-moz-animation:fadeIn ease-in 9s infinite;
animation:fadeIn ease-in 9s infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
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 this sample:
link
CODE HTML:
<div class="quote">
<a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a>
</div>
CODE CSS:
#dex-sign {
display: inline-block;
margin: 30px 10px 15px 10px;
width: 255px;
height: 84px;
background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
}
#dex-sign.play {
-moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
opacity: .9;
}
a#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
I tried to add animation-iteration-count: infinite; But it still does not work.
With Jquery is simple but I would not use it.
Can you please tell me what I should do?Do I have to add something else to work?
Thank you in advance !
Check out working fiddle: https://jsfiddle.net/ash06229/9ybp4zkp/
I changed your CSS little bit.
#dex-sign.play {
-moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation-duration: 5000ms;
animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
Here it is on JS fiddle
http://jsfiddle.net/VR7AN/
I have made a simple animation with the basic principles of this guide: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
The animation runs perfectly the first time, but when it loops it turns grey and only cycles through some of the images. I can't figure out why the loop would work but not the same as the first time.
Here's my css:
#fadethru > img {
position: absolute;
color: transparent;
top: 0px;
left: 0px;
opacity: 0;
z-index: 0;
display: block;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
-moz-animation: imageAnimation 4.5s linear infinite 0s;
-o-animation: imageAnimation 4.5s linear infinite 0s;
-ms-animation: imageAnimation 4.5s linear infinite 0s;
animation: imageAnimation 4.5s linear infinite 0s;
animation-iteration-count: infinite;
}
#fadethru > img:nth-child(1) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#fadethru > img:nth-child(2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
#fadethru > img:nth-child(3) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#fadethru > img:nth-child(4) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
#fadethru > img:nth-child(5) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#fadethru > img:nth-child(6) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#fadethru > img:nth-child(7) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
-ms-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#fadethru > img:nth-child(8) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#fadethru > img:nth-child(9) {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
-o-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0 }
}
and the HTML:
<div id="fadethru">
<img src="img/redjewel.png" id="red" alt="red jewel">
<img src="img/orangejewel.png" id="orange" alt="orange jewel">
<img src="img/yellowjewel.png" id="yellow" alt="yellow jewel">
<img src="img/grassjewel.png" id="grass" alt="green jewel">
<img src="img/greenjewel.png" id="green" alt="turquois jewel">
<img src="img/bluejewel.png" id="blue" alt="blue jewel">
<img src="img/indigojewel.png" id="indigo" alt="indigo jewel">
<img src="img/purplejewel.png" id="purple" alt="purple jewel">
<img src="img/pinkjewel.png" id="pink" alt="pink jewel">
</div>
You need to display each item only for the portion of the time of the total loop it takes up. So 9 displays / 100 percent = 11.11 percent of total loop time per element.
You have the elements displaying from 15-50% of the loop, so when it starts to repeat, some elements are covering others, but that doesn't work properly, so through that error you are seeing grey.
I did mine as 0-14%, lazily, and also only for chrome (which I use) so I didn't have to type all that code! But it should fix your issue:
#fadethru > img {
opacity:0;
position:absolute;
top:0; left:0;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
}
and
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
9% { opacity: 1 }
14% { opacity: 0 }
100% { opacity: 0 }
}
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