How do I delay the start of the following fade out command? - html

I would like the delay the start of the following command and would appreciate any recommendation(s). I am a beginner at this and Thank you in advance.
Sample Text


Use animation
Refer animation css
You can delay the animation by setting the animation-delay: the time between the element being loaded and the start of the animation sequence.
In our code animation delay is set as 3s -webkit-animation: fadeout 5s linear 3s forwards;
.fadeOut {
width: 200px;
height: 200px;
background: #191970;
color: #fff;
-webkit-animation: fadeout 5s linear 3s forwards;
animation: fadeout 5s linear 3s forwards;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
<div class="xr_ap xr_ac c2" id="xr_xpxr_40">
<span class="xr_annt animated fadeOut c1" id="xr_uid_10"></span> </div>
<div class="xr_txt Normal_text c4">
<span class="xr_annt animated fadeOut c3">Sample Text</span>
</div>

Related

How can I make fade out text

This is my first question on this platform.
I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.
this is the code that I have found.
#-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white;
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;

This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly
.fader {
animation: fadeOut ease 8s;
-webkit-animation: fadeOut ease 8s;
-moz-animation: fadeOut ease 8s;
-o-animation: fadeOut ease 8s;
-ms-animation: fadeOut ease 8s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
<h1 class="fader">
Hey!
</h1>

You can make an animation with the #keyframes tag. For instance
#keyframes fade-out {
100%{
opacity: 0%;
}
}
and then also in your CSS you have something like this:
.your-class{
animation: fade-out 3s linear 10s 1;
animation-fill-mode: forwards;
}
And then in your HTML you have this:
<div class="your-class">What is 1+1?</div>
The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value.
animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;
Hoped this helped you.

CSS fade-out and stay so [duplicate]

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
Is there a CSS only way to fade-out this text as below and have it stay hidden once the animation completes? It currently fades out, then appears again. I have tried adding display: none (as well as height: 0px, which isn't really what I want), but the issue remains - it re-appears once the animation completes.
Happy to use some JavaScript to do this (there is a stack overflow answer explaining how to listen out for the end of the animation event), but pure CSS is preferred.
.fade-out {
animation: fadeOut ease 5s;
-webkit-animation: fadeOut ease 5s;
-moz-animation: fadeOut ease 5s;
-o-animation: fadeOut ease 5s;
-ms-animation: fadeOut ease 5s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>

Use animation-fill-mode: forwards; for that purpose:
.fade-out {
animation: fadeOut ease 5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>

CSS animation delay is not working on fadeIn effect. The animation begins immediately regardless of what i set the delay to

Basically what the title says. I am trying to get this div to appear about 4s after page load, but it is instead appearing straight away. It is doing the fade animation (which lasts 2 seconds) but this animation is beginning straight away.
Here is the HTML:
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
animation-delay: 5s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#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;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
Any help at all on this would be great. I have googled it for hours but can't seem to work out why it is not working.
p.s I am using this on Chrome.

As you're using prefixes for different browsers and they are after the original animation, browsers will use their prefixed animation (e.g. browsers using -webkit will expect -webkit-animation-delay).
You could add animation-duration with all separate prefixes or just use animation-delay in animation all together:
#aboutone {
text-align: center;
margin-top: 10px;
z-index: 0;
opacity: 0;
/* animation: duration timing-function delay name */
animation: 2s ease 5s fadeIn;
-webkit-animation: 2s ease 5s fadeIn;
-moz-animation: 2s ease 5s fadeIn;
-o-animation: 2s ease 5s fadeIn;
-ms-animation: 2s ease 5s fadeIn;
animation-fill-mode: forwards;
}
#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; }
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
If you want the animation to start (with delay) after the whole body is loaded and not right when user loads the page, you can use onload event listener on the body (As this answer to your question says)

You can use dom call back with a function in Javascript to wait until the document is loaded, then add the style to the element.
(function() {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#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;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>
As Vepthy suggested in comments... you could also add an event listener for the load. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
window.addEventListener('load', (event) => {
let target = document.querySelector('#aboutone');
target.style.cssText = "animationDelay: 5s; webkit-animation: fadeIn ease 2s; -moz-animation: fadeIn ease 2s; -o-animation: fadeIn ease 2s; -ms-animation: fadeIn ease 2s;";
});
.abouttext {
text-align: center;
/*color: white; removed for snippet demo*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
float: right;
}
#aboutone {
margin-top: 10px;
animation: fadeIn ease 2s;
z-index: 0;
opacity: 0;
animation-fill-mode: forwards;
}
#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;
}
}
<div class="abouttext" id="aboutone">
<p>hello</p>
</div>

Defining animation direction when using multiple animations on same element

I have this:
.about5 {
animation: fade 4s ease forwards, warp 1s linear;
animation-delay: 2s;
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(95deg);
}
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
<div class="about5">About</div>
<div class="about">About text etc</div>
Why, when I have separated multiple animations by a comma, will the second animation:
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg)
rotateZ(29deg) rotateY(-180deg);
}
}
#media (min-width: 768px) {.about {
animation:
spin 20s linear infinite, warp 2s linear infinite; animation.
delay: 4s;}}
not take effect?
I want aboutelement to spin and translateZ but it's not working. Is this because of the comma in the wrong place?

It works ok, your problem must be in another place:
.about5 {
animation: fade 16s ease forwards infinite, warp 4s linear infinite;
animation-delay: 2s;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
<div class="about5">About</div>
<div class="about">About text etc</div>

Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions

The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
You can find more info about Keyframe Animations here.

Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
#keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
JSfiddle Demo

Try this CSS
#keyframes blink {
0% { color: red; }
100% { color: black; }
}
#-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
This is <span class="blink">blink</span>
​
You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.

There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
#keyframes blink { 50% { color: transparent; } }
#-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.
Fiddle: http://jsfiddle.net/2r8JL/

I'm going to hell for this :
=keyframes($name)
#-webkit-keyframes #{$name}
#content
#-moz-keyframes #{$name}
#content
#-ms-keyframes #{$name}
#content
#keyframes #{$name}
#content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
http://codepen.io/anon/pen/kaGxC (sass with bourbon)

Another variation
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink { 50% { visibility: hidden; }}
#keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>

If you want smooth blinking text or something a like you can use following code:
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
#keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
<span class="blinking">I am smoothly blinking</span>

It's working in my case blinking text at 1s interval.
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% { opacity: 0.4; }
}

if you want some glow effect use this
#keyframes blink {
50% {
opacity: 0.0;
}
}
#-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}

Please find below solution for your code.
#keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>