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
Related
I have a simple CSS animation which runs fine on desktop but doesn't seem to work on iPad. I have tried both Chrome and Safari.
Here's the code:
.scroll-down img {
-webkit-animation: 3s ease 0s normal none infinite running myscroll;
-moz-animation: 3s ease 0s normal none infinite running myscroll;
animation: 3s ease 0s normal none infinite running myscroll;
}
#-webkit-keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
Do I have some type of syntax error?
always add the generic - not browser specific version of css when also using the browser one ex.
#-webkit-keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
#keyframes myscroll {
0% {
opacity: 1
}
50% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: translateY(101px);
transform: translateY(101px);
}
}
Found a solution. Apparently iPad doesnt like shorthand so I had to do this:
-webkit-animation-name: myscroll;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: none;
-webkit-animation-play-state: running;
animation-name: myscroll;
animation-duration: 3s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
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;
}
Can anyone see what I do wrong? I'm trying to make my animation css work in Firefox but somehow, it still doesn't work.
.animatietekst {
-webkit-animation: scaling 1s 10 ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation: scaling 1s 10 ease;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#-webkit-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}
#-moz-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}
Firefox doesn't recognise webkit transforms
#-moz-keyframes scaling {
from {
-moz-transform: scale(0.96);
}
to {
-moz-transform: scale(1);
}
}
In any case you don't need the moz prefix any more
#keyframes scaling {
from {
transform: scale(0.96);
}
to {
transform: scale(1);
}
}
will work just fine with
.animatietekst {
-webkit-animation: scaling 1s 10 ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation: scaling 1s 10 ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
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)
Is it possible to cross fade 5 images in CSS, without using java script? I have found a similar question:
css3 image crossfade (no javascript) , however, it has only the CSS code snippet; which I tried, but could not get it working. I'm new to CSS, so could not link the CSS mentioned in the above page to my following HTML:
<div id= "crossfade">
<img class = "cone" src = "1.png" alt = "png">
<img class = "ctwo" src = "2.png" alt = "png">
<img class = "cthree" src = "3.png" alt = "png">
<img class = "cfour" src = "4.png" alt = "png">
<img class = "cfive" src = "5.png" alt = "png">
</div>
This can easily be done with CSS3 if you know how many images you have.
jsFiddle: http://jsfiddle.net/hajmd/
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation for each image will last 30 seconds in infinete number of times.
#crossfade > img:nth-child(2) {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
The example you referenced should work for you for the example you referenced. However please note that CSS3 is not supported on all browsers (Such as IE8 and IE7) and therefore will not work in those browsers.