I'm trying to make an animation-delay on my animation. The animation is used on some text, and the animation-delay line doesn't seem to work.
Here is the code :
.wtitle {
opacity:100%;
animation-name: afade;
animation-duration: 1s;
animation-delay: 15s;
}
#keyframes afade {
from {
opacity:0;
}
to {
opacity:100%;
}
}
Does anyone have an idea ?
You need animation-fill-mode: both;
Without this line, your animation will only have any effect when it is actually running. That means at the 15 seconds delay, the animation has no effect on the .htitle whatsoever.
.wtitle {
opacity:100%;
animation-name: afade;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
}
#keyframes afade {
from {
opacity:0;
}
to {
opacity:100%;
}
}
<h1 class="wtitle">Hello</h1>
.wtitle {
opacity: 100%;
background: red;
animation-name: afade;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
}
You are missing 1 attribute.
Related
I'm trying to make a CSS animation were a word fades out, another words replaces it and the new word fades in. Can't seem to figure out the correct way to do it. Here's my code:
HTML
<span class="words"></span>
CSS
.words:before {
content: "one";
animation-name: replacement;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes replacement {
0% {
opacity: 0;
}
100% {
opacity: 1;
content: "two";
}
}
https://jsfiddle.net/fp2h6q4L/
Try this CSS
.words:before {
opacity:0;
content: "one";
animation-name: replacement;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: absolute;
}
#keyframes replacement {
0%{
opacity: 1;
}
50%{
opacity:0;
}
100%{
content:"two";
opacity:1;
}
}
<span class="words"></span>
If you want to do this with pure CSS, you'll probably need to define a second animation to change the text and then set the delay on that one to run when opacity is 0 so that the abrupt change is hidden.
I have a very simple animation that fades out and shrinks a div.
But the problem is that when the animation finishes it goes back to the start and stays there.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards; to your .fade-out rule it will fix your animation.
animation-fill-mode specifies how CSS rules should be applied before and after executing the animation. The default is none which means that before and after the animation is executed, it will not apply any of the animation styles. That's why you're seeing it revert to the pre-animation state.
forwards tells the browser to retain the styles from the last keyframe. That's what you're looking for.
See the MDN docs for more information.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
Use animation-fill-mode property
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
EDIT: corrected a typo in the CSS noted by ARLCode below - not relevant.
Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence.
First, I start with all of the text hidden using p {visibility: hidden}, and add an animation to change the visibility value after n seconds.
In addition, I nested <p> in <div> and added an animation to fade <div> by animating opacity. This should fade the text that had just appeared, after (n+x) seconds.
The fade-out is no problem, but the pop-in never works. When I try to animate visibility, no matter how, the page always loads with the selected text visible, despite its earlier setting as hidden. Thus, it doesn't pop-in. It's just already there on the page. Below is the code and a link to codepen.
Am I on the wrong track?
HTML
<p id="one">this is visible on page load and then fades</p>
<div id="two-container"> <!---this div is for fading the text--->
<p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>
CSS
/***************************************
GENERAL
***************************************/
p {
visibility: hidden;
}
/***************************************
TEXT ANIMATION SEQUENCE
***************************************/
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/***************************************
ANIMATION KEYFRAMES
***************************************/
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% {visibility: hidden; }
100% {visibility: visible; }
}
Code Pen Demo
You can see in the preview that the page loads #two as visible, despite p {visibility:hidden;} in the general section. Removing the pop-in animation fixes this. The fade-out animation for #two-container works fine. What am I missing?
A point of clarity: I do NOT expect - as many others here have - for visibility to animate as a fade. I want the desired text to appear suddenly, and AFTERWARDS fade gradually - thus the second animation selecting <div>. The binary nature of visibility is fine.
Okay, here you go I think this is the effect you want.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
visibility: hidden;
-webkit-animation: pop-in 2s;
-webkit-animation-delay: 4s;
-moz-animation: pop-in 2s;
-ms-animation: pop-in 2s;
-o-animation: pop-in 2s;
animation: pop-in 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
from {opacity: 1; }
to {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); }
100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes pop-in {
0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
#keyframes pop-in {
0% { visibility: visible; opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
Codepen Demo
The issue is you placed -webkit- as --webkit- I fixed the CSS down below.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
Code Pen Demo
I've got this CSS:
#-webkit-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slider {
background-size: cover;
position: fixed;
top: 100px;
bottom: 0px;
height:calc(100%-135px);
width: 100%;
}
#slider img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0px;
width: 100%;
height: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#slider img {
-webkit-animation-name: sliderFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-moz-animation-name: sliderFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: sliderFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#slider img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#slider img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#slider img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#slider img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
I'm learning CSS Animations, but I didn't find out how to set the display time of one image.
I tried to change the animation delay but that only causes trouble..
Do you have an idea how to do this ?
Best regards
There were several things that needed some attention. Here's how I accomplished it, though there are other ways.
For the animation itself:
#keyframes sliderFadeInOut {
0% {
opacity:0;
}
17% {
opacity:1;
}
25% {
opacity:1;
}
92% {
opacity:1;
}
100% {
opacity:0;
}
}
This causes the image to fade in, then fade out at whatever animation-duration we set.
Set the animation-iteration-count to 1, so the animation runs once.
animation-iteration-count: 1;
Each image in the stack needs to be timed to appear, then disappear as the next image in the stack becomes visible. To do this, use animation-delay and increase it for each image in the stack.
#slider img:nth-child(1) {
animation-delay: 0s;
}
#slider img:nth-child(2) {
animation-delay: 4s;
opacity:0;
}
#slider img:nth-child(3) {
animation-delay: 8s;
opacity:0;
}
#slider img:nth-child(4) {
animation-delay: 12s;
opacity:0;
}
The staggered animation-delay properties cause the first image in the stack to be shown initially. It's animation takes 5 seconds and results in the image disappearing. At 4 seconds, the 2nd image in the stack starts it's animation, appearing just as the first image is disappearing. And then so on for the 3rd and 4th images.
In the code above there's also an initial opacity property for the 2nd, 3rd and 4th images. This is necessary to hide them initially.
As it's setup now the images will loop only once. Some minor tweaking to animation-delay and animation-iteration-count would cause it to loop infinitely.
Here's the working demo.
Have so far got this
http://codepen.io/tacrossman/pen/GJglH
But what i want is for the cursor blinking animation to be running after each new word (span) is written out.
When I try and do something like
.type:after {
content:"_";
opacity: 0;
animation: cursor 1s infinite;
}
it doesn't have the desired effect. I am thinking that there is a conflict in the animation as i am technically running an animation within something that is already animating.
If you need anything else let me know, thanks a lot
Like this? Pretty sure this is what you were trying to achieve.
Updated Codepen result
span > span {
animation: cursor 1s infinite;
}
I also fixed a few glitches in the animation.. some were overlapping each other.
Are you using Safari or Chrome? I'm using Firefox and I noticed an issue is that you are inconsistent with your prefixes.
Here's new code without the webkit prefixes (add them back if you want, but considering it's not working for you, I'm assuming they're not necessary):
Working JSBIN: http://jsbin.com/ITokiXO/1/edit
.type{
position: absolute;
opacity: 0;
width: 12ch;
overflow: hidden;
animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.type:nth-child(3) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.type:nth-child(4) {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
.type:nth-child(5) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.type:nth-child(6) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#keyframes words {
0% { opacity: 0; width:0; }
2% { opacity: 1;}
14% { opacity: 1; width: 12ch;}
15% { opacity: 0; }
}
.cursor:after {
content:" _";
opacity: 0;
animation: cursor 1s infinite;
}
#keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
here is a type effect but it uses steps in the animation function:
http://codepen.io/jonathan/pen/lwFzv
#-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}
#keyframes typing {
from { width: 0 }
to { width:14em }
}
#-webkit-keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas; }
h1 {
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;
-webkit-animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
}
you will notice the steps is set to 26 which is the number of characters in my H1
<h1>Typing Effect by Jonathan.</h1>
you could probably use the :after but it might require JS to calculate the word length for each word
also it best to always add the property without the vendor prefixes so it can used in browsers that support the animation property.. like in this case firefox does not need the vendor prefix
http://caniuse.com/#feat=css-animation