I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location.
https://jsfiddle.net/v3jds98d/
span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0;
-webkit-animation: textanimation 3s ;
-moz-animation: textanimation 3s ;
-ms-animation: textanimation 3s ;
animation: textanimation 3s ;
}
.animation_text1 { -webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.animation_text2 { -webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#keyframes textanimation {
0%{opacity: 0; color:transparent;}
50% {opacity: 1; color:#fff;}
100% {opacity: 0; color:transparent;}
}
#-webkit-keyframes textanimation {
0%{opacity: 0; color:transparent;}
50% {opacity: 1; color:#fff;}
100% {opacity: 0; color:transparent;}
}
Animation is working good. But the text not rotate continuously. I know to add "infinite" property. If I add this property, it ruined my animation. How can I fix this?
You can actually use infinite loop for your animation. Just that you need to time your animation at the keyframes instead of using delay.
See the fiddle
The CSS :
.animation_text{
animation:animation1 9s infinite;
}
.animation_text1 {
animation:animation2 9s infinite;
}
.animation_text2 {
animation:animation3 9s infinite;
}
#keyframes animation1 {
0%{opacity: 0; color:transparent;}
10% {opacity: 1; color:#fff;}
20%,100% {opacity: 0; color:transparent;}
}
#keyframes animation2 {
0%, 30%{opacity: 0; color:transparent;}
40% {opacity: 1; color:#fff;}
50%,100% {opacity: 0; color:transparent;}
}
#keyframes animation3 {
0%, 60%{opacity: 0; color:transparent;}
70% {opacity: 1; color:#fff;}
80%,100% {opacity: 0; color:transparent;}
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have got an crossfading animation to show 3 steps of content. How could I make it so that it ends after the third one? so no more crossfading.
CodePen link
I divided it into nth-child(),
Here's my CSS code:
.animation {
-moz-animation: imageAnimation 30s linear 0s;
-ms-animation: imageAnimation 30s linear 0s;
-o-animation: imageAnimation 30s linear 0s;
-webkit-animation: imageAnimation 30s linear 0s;
-webkit-backface-visibility: hidden;
animation: imageAnimation 30s linear 0s;
color: black;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.animation:nth-child(2) {
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
-o-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animation:nth-child(3) {
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#-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;
}
}
HTML
<div class="box">
<div class="animation">
<h4>Hello-1</h4>
</div>
<div class="animation">
<h4>Hello-2</h4>
</div>
<div class="animation">
<h4>Hello-3</h4>
</div>
</div>
If you by "to end" mean that the 3rd child does not dissapear, you need to declare new animation #keyframes declaration that you use for that 3rd child, so it does not end (100%) with opacity:0.
EDIT:
This is how the new keyframes definition could look like:
#keyframes imageAnimationStop {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
100% {
opacity: 1
}
}
This says that the end state (100%) should have opacity: 1 so it remains visible. I also forked your codepen. This new keyframe is not browser prefixed but I guess you can do that much :). Then you just need to use this new heyframes definition for your 3rd child demo
I'm working on a project where multiple div's are loaded with a small animation, but as you can see in the fiddle down, they're carrying all at once. Any idea how do they carry one after another with a delay of 0.1 s?
http://jsfiddle.net/HaQmN/38/
Thanks
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.example {
display: inline-block;
width:48%;
height:100px;
background:orange;
margin: 1% 1%;
}
<div class="animated fadeInUp example">Hello World</div>
You can delay animation with animation-delay property like bellow.
.animated:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.animated:nth-child(2){
-webkit-animation-delay: 0.2s;
background-color: red;
}
.animated:nth-child(3){
-webkit-animation-delay: 0.3s;
animation-delay: 1.5s;
}
.animated:nth-child(4){
-webkit-animation-delay: 0.4s;
animation-delay: 1.5s;
}
.animated:nth-child(5){
-webkit-animation-delay: 0.5s;
animation-delay: 1.5s;
}
.animated:nth-child(6){
-webkit-animation-delay: 0.6s;
animation-delay: 1.5s;
}
But that is a lot of CSS and doest not suite if you have dynamic number of Divs. so you javascript to add delay property to you divs one by one.
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.
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