Okay, I have this text that I want to appear after 20s. I am using the animation-delay property but it is not working. Perhaps, I am doing something wrong.
Please help me out to get to right track..
Here is my code..
#import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
Here is the link on Fiddle
Thank You for everything!
EDIT ONE:
After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following
#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over.
How can I keep the text visible after the animation is done??
Thank you!
You've specified the -webkit versions in the wrong order. The -webkit-animation replaces the delay rule that you just set up. Reverse the order so that the delay comes after.
-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;
You can avoid these issues if you always set a single attribute:
-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;
Don't forget to also set:
opacity: 0;
Otherwise the text will be visible until the animation starts, and:
-webkit-animation-fill-mode: forwards;
So that the animated opacity is retained after fading in.
You need to place the animation-delay rule after the shorthand, as the shorthand is resetting your value to the default which is 0s - or you could just place it within the shorthand:
#text {
-moz-animation: fade-in 5s 15s;
-webkit-animation: fade-in 5s 15s;
animation: fade-in 5s 15s;
}
http://jsfiddle.net/wXdbL/2/ (changed the delay to 1s so it's obvious)
Related
I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.
I have written the following CSS and put it element:after to delay the hover effect to close.
transition: .50s all;
transition-delay: 3s;
Now I want the hover effect will be close after 3 even if the cursor is on the element.
In CSS is there any way to do it?
You could use a keyframe animation instead, whilst setting the iteration count to 1:
note
Prefixing will be required.
Demo
div {
transition: all 0.8s;
height: 300px;
width: 300px;
background: tomato;
}
div:hover{
-webkit-animation: 3s linear hoverit;
-webkit-animation-iteration-count: 1;
-moz-animation: 3s linear hoverit;
-moz-animation-iteration-count: 1;
animation: 3s linear hoverit;
animation-iteration-count: 1;
}
#-webkit-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#-moz-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
<div></div>
use animation instead of transition
#keyframes doMagic {
0% {
// initial styles
}
100% {
// hover styles
}
}
.selector {
animatiom: doMagic 3s ease forwards;
animation-delay: 3s; // not sure if u need it
}
using the keyword forwards you tell the animation to stay in its finished state
read more on http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
if you DONT put that . the animation will play to 100% then go to initial state
I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>
Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example
Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
Is it possible to hide element 5 seconds after the page load?
I know there is a jQuery solution.
I want to do exactly same thing, but hoping to get the same result with CSS transition.
Any innovative idea? Or am I asking beyond the limit of css transition/animation?
YES!
But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.
Therefore, create an animation for the elements in question, and simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.
FIDDLE
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#hideMe {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
HTML
<div id='hideMe'>Wait for it...</div>
based from the answer of #SW4, you could also add a little animation at the end.
body > div{
border:1px solid grey;
}
html, body, #container {
height:100%;
width:100%;
margin:0;
padding:0;
}
#container {
overflow:hidden;
position:relative;
}
#hideMe {
-webkit-animation: cssAnimation 5s forwards;
animation: cssAnimation 5s forwards;
}
#keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
#-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
<div>
<div id='container'>
<div id='hideMe'>Wait for it...</div>
</div>
</div>
Making the remaining 0.5 seconds to animate the opacity attribute.
Just make sure to do the math if you're changing the length, in this case, 90% of 5 seconds leaves us 0.5 seconds to animate the opacity.
Of course you can, just use setTimeout to change a class or something to trigger the transition.
HTML:
<p id="aap">OHAI!</p>
CSS:
p {
opacity:1;
transition:opacity 500ms;
}
p.waa {
opacity:0;
}
JS to run on load or DOMContentReady:
setTimeout(function(){
document.getElementById('aap').className = 'waa';
}, 5000);
Example fiddle here.
you can hide elements on load and then show and animate them after some delay using CSS and keyframes as below
// keyframes fadeIn Animation
#keyframes fadeIn {
0% {
transform:scale(0,0);
visibility:visible;
opacity:0;
}
100% {
transform:scale(1,1);
visibility:visible;
opacity:1;
}
}
// CSS class
.containerDiv {
visibility:hidden;
animation: fadeIn 3s forwards 3s;
}
Why not try fadeOut?
$(document).ready(function() {
$('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>
fadeOut (Javascript Pure):
How to make fadeOut effect with pure JavaScript
I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.