*** 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.
Related
I have been trying to make an info button which displays time when clicked in ease animation, now I want to hide this button after 5 sec. Of being clicked. I have tried and tried but nothing happens😔. A solution please!!!
.info:hover {
background-color: white;
padding: 0 0 0 5.1px;
width: 315px;
text-align: left !important;
animation: hideAnimation 0s ease-out 5s;
animation-fill-mode: forwards;
}
#keyframes hideAnimation {
to {
visibility: hidden;
width: 0;
height: 0;
background-color: transparent;
}
}
<div class="info">
<i class="fa fa-info-circle"></i>
<span class="extra-info" id="times"></span>
</div>;
I tried many things as many as possible but neither trials succeeded
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>
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>
We have div within ember growl notification after the notification hides with css animation after 5 sec ...on inspecting the div is still seen in the element. I want to remove this div element
<div class="ember-growl-container">
{{#ember-growl-notification-placeholder as |notification close| }}
<div class="ember-growl-notification-item-container ember-view {{if notification.isSuccess 'ember-success' 'ember-error'}}" data-test-flash-selector={{notification.type}}>
{{notification.message}}
<div class=" col-md-1 ">
<button onclick={{action close}} class="ember-close">X</button>
</div>
</div>
{{/ember-growl-notification-placeholder}}
</div>
CSS Class
.ember-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
box-shadow: 1px 1px 1px 1px;
opacity: 1;
border: 1px solid transparent;
background-image: none;
font-family: unset;
text-align: left;
font-weight: 700;
top: 10%;
box-sizing: border-box;
z-index: 5000;
padding: 9px;
display: inherit;
border-radius: 4px;
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
.ember-close {
border: none;
background-color: #d4edda;
color: #155724;
}
}
I think I understand what the issue is. Using the example that ember-growl-notification has in their readme, I noticed that the auto-close feature of growl isn't triggered.
You've tried to get the hide feature back by using a css transition, but CSS doesn't actually remove an element.
Try this instead.
{{#ember-growl-notification-placeholder as |notification close| }}
{{#ember-growl-notification-item type=notification.type timeout=notification.timeout}}
{{notification.message}}
<button onclick={{action close}} class="ember-close">X</button>
{{/ember-growl-notification-item}}
{{/ember-growl-notification-placeholder}}
I'm not very experienced in Javascript/jQuery/CSS3 animations.
I needed an animated slider, so I downloaded an example from internet and tried to modify it.
At that banner image were at right side and texts were at left side.
But, I need image at left side and texts at right side.
That's why, I change the image's div and text's css this way:
Previous CSS code:
.da-img {
position: absolute;
left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 10%;
}
After changed by me:
.da-img {
position: absolute;
left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 40%;
}
After changing it, it worked fine:
But, when slider goes to the left to right or right to left, every things go to their previous position:
I don't understand why it happened. Every time after refreshing page, the image shows at the left side of the div for the first time, but after the slider moves, everything changes!
Please, tell me how can I fix it. You can see my touched files here.
To understand better how key frames works go here and have a read about it. they way he explains stuff is just really good.
there is some stuff you need to play with before you can make it work: this here is your start state:
.da-slide-fromleft h2{
-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
the rest is in sample at css/style.css line #337 as the name suggest is what happens when it does slide from the left side. that animation respond to this key frame:
#-webkit-keyframes fromLeftAnim1{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
#-webkit-keyframes fromLeftAnim2{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
that is just like saying move my element from -110% to 10% and while you do it change its opacity to 1.
what you need to do is see if there is any existing key frame that meets what you need, other wise just copy one of them change the name and play with the positions(right or left) and the %
so it will looks something like this::
.da-slide-fromleft h2{
-webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
-moz-animation: your_custom_name 0.6s ease-in 0.6s both;
-o-animation: your_custom_name 0.6s ease-in 0.6s both;
-ms-animation: your_custom_name 0.6s ease-in 0.6s both;
animation: your_custom_name 0.6s ease-in 0.6s both;
}
and is key frame:
#-webkit-keyframes your_custom_name{
0%{ left: -10%; opacity: 0; }
100%{ left: 110%; opacity: 1; }
}
also you can play to make it better with the animation transitions and times, easy-in, easy-out, and so on.. more here :CLICK ME: