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
Related
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>
*** 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.
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}}
So let's say I have three dots as spans inside a parent element.
I need to create a parent hover animation that will make the dots jump one by one with delay. I accomplished this without hover but I need the animation to work when I hover the parent element. At the moment when I hover the parent element no delay is applied to the children.
.dots-cont {
position: absolute;
right: 0px;
bottom: 0px;
}
.dot {
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>
You just need to add the animation property to .dot base instead of the :hover version. This way, you will get the same behavior no matter what. You can add any properties you want to the hover class, like changing the color.
.dots {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/5/
EDIT: To prevent animation on dot hover.
.dots-cont:hover > .dot {
animation: none;
}
https://jsfiddle.net/3gampq0b/6/
EDIT: Only animate on parent hover.
You can also add padding to the .dots-cont so the hover surface area is greater.
.dots-cont:hover > * {
animation: jump 1s infinite;
}
https://jsfiddle.net/3gampq0b/7/
By Using "animation: jump 1s infinite;" directly, you are overriding the animation-delay property for .dot elements.
Try Below snippet, see if this is what you are trying to do:
.dots-cont{
position: absolute;
left: 100px;
top: 100px;
}
.dot{
width: 12px;
height: 12px;
background: #22303e;
display: inline-block;
border-radius: 50%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
}
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation-name: jump;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
.dots-cont .dot-1{
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.dots-cont .dot-2{
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.dots-cont .dot-3{
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
#keyframes jump {
from {bottom: 0px}
to {bottom: 20px}
}
#-webkit-keyframes jump {
from {bottom: 0px}
to {bottom: 10px}
}
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</span>
I changed
.dots-cont:hover > .dot {
position: relative;
bottom: 0px;
animation: jump 1s infinite;
}
to
.anim .dot {...}
Then i add and remove anim class with jQuery.