Javascript/Css3 Expert,
I have my coding which display texts in sequence, however i need to remove the previous <p> text when display another <p>.
In simple words...I want to replace old displayed texts with upcoming new text and display the final text as it is.
here is the coding:
body {
background: #000;
padding-top: 10px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
opacity: 0;
animation: type 4s steps(60, end) forwards;
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
margin-bottom: 25px;
}
p:nth-child(7) {
animation-delay: 6s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
span {
animation: blink 1.8s infinite 8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
opacity: 1;
}
100% {
width: 30em;
opacity: 1;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<p>Text first.</p>
<p>Text 2nd...</p>
<p>Text 3rd...</p>
<p>Text 4th...</p>
<p>Text 5th...</p>
<p>Text 6th...</p>
<p><span>Final/Blinking Line</span> <span>|</span>
</p>
Summary: when you execute the code..it display <p> one after another Its Ok..but the <p> should replace with one another not to display 4 lines...only last <p> blicnking line should be display in the last.
thanks
Here's a CSS version based on the posted code for some ideas:
body {
background: #000;
color: white;
padding-top: 10px;
}
.container {
position: relative; /* to host absolute child elements */
}
.temporary {
position: absolute;
width: 0px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: type 1s steps(60, end);
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
}
p:nth-child(7) {
animation-delay: 6s;
animation-fill-mode: forwards;
}
span {
animation: blink 1.8s infinite 8s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
}
30% {
width: 10em;
}
31% {
width: 30em; /* provide reading time for longer lines */
}
100% {
width: 30em;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<h3>Demo</h3>
<div class="container">
<p class="temporary">Text first.</p>
<p class="temporary">Text 2nd...</p>
<p class="temporary">Text 3rd...</p>
<p class="temporary">Text 4th... but this is a fairly long line as well.</p>
<p class="temporary">Text 5th...</p>
<p class="temporary">Text 6th...</p>
<p class="temporary"><span>Final/Blinking Line</span> <span>|</span></p>
</div>
Changes:
Paragraphs use absolute positioning and are placed within a relatively positioned container so they occupy the same screen area. This was to prevent invisible paragraphs affecting the vertical displacement of visible ones.
The animation does not affect paragraph opacity. Animated paragraphs are specified to have zero width before and after animation. In combination with overflow: hidden, this hides paragraphs that are not being animated by default, without using opacity or display properties.
The blinking paragraph is the only one given an animation-fill-style of forwards to prevent it collapsing back to zero width when animation finishes.
To avoid multiple paragraphs being on display concurrently, the animation-delay times for paragraphs need to be not less than the animation-duration time of a single paragraph. The amended CSS rules reduce the duration to 1 second to match paragraph delay steps. But then, in order to have longer lines on display for at least 7 tenths of a second, only the first 30% of the width expansion is animated before jumping to full width. Some compromise is more or less needed to keep the animation simple, but timings and widths could always be varied according to requirements.
Blink
Simulation of CRT text terminal blinking can include a fade out effect to simulate the persistence time of the screen phosphor. Perhaps the simplest way is to provide multiple keyframes for an animation that ramp opacity up and down in accordance with graphic design.
As an example this graphic has a blink rate of 1hz, nominal duty cycle of 50% and a rapid phosphor decay of 200ms followed by a slower decay over another 300ms:
.screen {
font-family: "lucida console", "courier new", monospace;
color: #0b0;
background-color: black;
padding: 1em;
border-radius: 1em;
border: thick solid beige;
}
.fadeBlinkText {
animation-name: fade-blink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.fadeBlinkCursor {
animation-name: fade-blink;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
#keyframes fade-blink {
0% { opacity: 1;}
20% { opacity: 0.1;}
49.9% { opacity: 0.05;}
50% { opacity: 1;}
100% { opacity: 1;}
}
<div class=screen>
<p>Start text blinking in 2 seconds, cursor in 2.5 seconds:
<p><span class="fadeBlinkText">BLINK BLINK</span><span class="fadeBlinkCursor">|</span>
</div>
Related
I am making a project in which there is a text(which is "happy birthday to you") and a heart. At starting, the heart drops and hit the first word, then the second, and so on. When the heart hit the text, it should turn yellow. And when the heart hit the last word, after 1 or 2 seconds the text fades and reappears with the previous color.
I have done with the transform property but messed up with the colors. Please suggest me some solutions.
.main .text{
font-size: 50px;
font-family: cursive;
color: white;
animation: opacity-control 3.5s infinite;
}
.main .text span{
display: inline-block;
animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;
}
.main .text span:nth-child(1){
animation-delay: 0.25s;
}
.main .text span:nth-child(2){
animation-delay: 0.5s;
}
.main .text span:nth-child(3){
animation-delay: 0.75s;
}
.main .text span:nth-child(4){
animation-delay: 1s;
}
.main .text span:nth-child(5){
animation-delay: 1.25s;
}
#keyframes text-jump{
0%{
transform: translateY(0);
color: yellow;
}
10%{
transform: translateY(20px);
color: yellow;
}
15%{
transform: translateY(0);
color: yellow;
}
100%{
color: yellow;
}
}
#keyframes opacity-control{
0%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes color-change{
0%{
}
40%{
color: yellow;
}
95%{
color: yellow;
}
100%{
color: white;
}
}
You don't need 2 separate animations to change the text color and make it 'jump'.
Combine both of them, remove the 100% step (not needed), and change the 15% step so that it changes the text back to white after it animates.
#keyframes color-jump {
0% {
transform: translateY(0);
color: yellow;
}
10% {
transform: translateY(20px);
color: yellow;
}
15% {
transform: translateY(0);
color: white;
}
}
Change this to only use the one new animation:
.main .text span {
display: inline-block;
animation: color-jump 3.5s ease-in-out infinite;
}
This question already has answers here:
How can I delay the start of a CSS animation?
(3 answers)
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
How can I use setinterval() for css animation?
For example, in the example below, I want the div to come with animation after 3000ms. How do I do this?
Can I get it starting from bottom 0, like the price segment that changes when I choose the minute and day as on this page?
<div><span>$</span>2.000</div>
jsfiddle example
div {
font-size: 42px;
position: relative;
animation: mymove 0.3s;
animation-timing-function: ease-in-out;
}
div span{
font-size: 24px;
padding-right: 5px;
}
#keyframes mymove {
0% {
bottom: -70px;
}
100% {
bottom: 0px;
}
}
Set an animation-delay, together with animation-fill-mode:forwards to prevent the div from reverting to the initial state when the animation has finished. You can use opacity to control when to show the element (I've used a dark body background here so that your white text is visible):
body {
background: #333;
color: #fff;
}
.wrapper {
overflow: hidden;
}
.wrapper div {
font-size: 42px;
position: relative;
animation: mymove 0.3s;
animation-timing-function: ease-in-out;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
.wrapper div span {
font-size: 24px;
padding-right: 5px;
}
#keyframes mymove {
0% {
opacity: 1;
display: block;
transform: translateY(-70px);
}
100% {
opacity: 1;
display: block;
transform: translateY(0px);
}
}
<div class="wrapper">
<div><span>$</span>2.000</div>
</div>
*** Update ****
Manage to get all 3 line of text to move out together but trying to resolve the issue of after moving out the text will appear again. Updated the codes below.
*** Update 2 ****
Ok, I managed to solve the issue (I think). I just need to add animation-fill-mode: forwards; for the main div and added animation-fill-mode: backwards for all the inner content. But I'm open if any expert have a better solutions.
I've been trying to learn animation and I want to this type of animation, preferably with just using CSS but if that is not possible I don't mind CSS and JS.
What I want to do is this:, I have 3 line of text
XXXXXXXXXX
xxxxxxxxx
xxxxxxxxx
When the page load, the first line will appear follow by the second and the third. Than they will stay for say 5 seconds before all 3 move out and fade off.
So far I've managed to do this: View in Codepen
.heading-primary {
color: #000;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
animation: moveOutRight 2s ease-out 10s;
animation-fill-mode: forwards;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
.heading-primary--sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 1s;
animation-fill-mode: backwards;
}
.heading-primary--sub1 {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.75rem;
font-weight: 700;
animation: moveInLeft 2s ease-out 2s;
animation-fill-mode: backwards;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes moveOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(10rem);
}
}
<div class="header__text-box">
<h1 class="heading-primary"><span class="heading-primary--main">Outdoors </span><span class="heading-primary--sub">is where life happens</span>
<span class="heading-primary--sub1">is where life happens</span>
</h1></div>
But how do I make the 3 text move out together rather than one at a time. ie I want them to come in one at a time which is working but can't find a way to make them move out together. I think it has something to do with the delay timing which I've set which affect the moving out too.
I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?
Please check the code in this jsfiddle.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
css:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
#keyframes loadbar {
0% {width: 0%;left:0;right:0}
}
I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration
I made the bars semi-opaque to show when the animations fire.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
position: relative;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: red;
z-index: 1;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
z-index: 2;
}
.progress-bar-outer div {
position: absolute;
top: 0; bottom: 0;
transform: translateX(-100%);
animation: loadbar 3s linear;
-webkit-animation: loadbar 3s linear;
opacity: 1;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
100% {
transform: translateX(0);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.
.progress-bar-inner {
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
-webkit-animation: loadbar 2s ease 2s forwards;
animation: loadbar 2s ease 2s forwards
animation-delay: 2s;
-webkit-animation-delay: 2s;
opacity:0;
}
#keyframes loadbar {
0% { width: 0%;left:0;right:0}
1% { opacity: 1}
100% { opacity: 1}
}
See working example:
https://jsfiddle.net/dfkLexuv/10/
I created an animated header div menu that slides down on page load. I used animation-delay to delay the animation for 1 second. When the user scrolls down the header div changes colors fine but when scrolling back up the header disappears for a split second. Please help.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});
}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;
}
#-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>
https://jsfiddle.net/qectrqg3/35/
If you're simply animating the top value, I would recommend using transition instead of animations. Transitions will ensure you don't get a flicker when changing "animation" values in the middle of a transition.