I came across text that fades in and fades out one after the other.
In developer mode, I was able to see the opacity vary for the texts from 0 to 1 to 0 in a sequence. How is this achieved?
<div class="text" style="opacity: 0;">The</div>
<div class="text" style="opacity: 0;">Nomads</div>
Here's a very simplistic approach using CSS3 Animations and the keyframes property (Please note I've edited this answer to include improvements from Frits' comment)
Although you might need to tweak it a little as
a text which fade in fade out one after the other
Is a pretty lose specification.
/* Define the key frames for animating the fade in / fade out */
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* attach the animations to the elements via their id attribute using a delay of 0s and 50% of the runtime respectively */
#one {
animation: fade 3s infinite 0s;
}
#two {
animation: fade 3s infinite 1.5s;
}
<p id="one">
This line of text will fade out as the next lines fade in
</p>
<p id="two">
This line of text will fade in as the previous lines fade out
</p>
you can use the following:
obviously I'm going to use JQuery:
jQuery('<div_name>').css('opacity', '<opacity_value>');
Related
I want my CSS div to be completely invisible when page opens but after 2s appear on screen.
I tried setting opacity: 0; and then transition: opacity 100 2s; but it didn't work. I don't want CTA for example for it to happen after they hover or something but instead I want it to happen even if the user doesn't move the mouse. Please help!
You can use CSS animation to make it. Like this-
HTML-
<div class="div"></div>
And CSS-
<style>
.div{
width:100px;
height:100px;
background:red;
animation-name:opacity;
animation-duration:4s;
}
#keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}
</style>
U can simply use CSS animations instead of transition.
consider HTML code having single div element
<div id="main"></div>
now to apply CSS animation we do something like this,
#main{
...add your desired code for styling the div...
animation-name:onload;
animation-duration: 1s;
animation-delay: 2s; //this is the key line, what this means is the animation would start after 2s of delay.
}
// Now creating animation
#keyframes onload{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
What i want to do is make my first line of text kind of zoom+fade in when the page is loaded, and my second line of text 2s after the page is loaded. I got the animations working and the timing using animation-delay, but i just can't figure out how to make the second line of text invisible until start of animation..
Here's a jsfiddle:
http://jsfiddle.net/L2wcxg2f/2/
This is my markup:
<center>
<h1><div id="line1">First</div><div id="line2">Second</div></h1>
</center>
And this is my css:
#line1 {animation: onload 2s;}
#line2 {animation: onload 2s; animation-delay: 2s;}
#keyframes onload {from{opacity: 0.0; font-size: 170px;}to{opacity: 1.0; font-size: 120px;}
Thanks in advance!
Give #line2 opacity:0 at the start and also animation-direction: forwards. Demo
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.
I'm trying to have this slide show jsfiddle with cover background images slides and displaced text on it, working without the auto loop animation, only by buttons.
All elements of the slideshow have separate fade in/out applied, so background is shown before text.
Try to click on buttons, everything work fine, but I'm not able to remove autoloop.
Probably I've to change animation for transition,and remove -webkit-animation: titleAnimation 24s linear infinite 0s; on all elements, I don't know. I've tried but without success.
I've solved my problem, I put here the solution, could be interesting for someone seeking for something like this. I wasn't able to find something similar online.
I have updated the animations like this:
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
from {
opacity:0;
}
to {
opacity:1;
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
from {
opacity:0;
}
to {
opacity:1;
-webkit-animation-fill-mode:forwards; }
}
and added an animation fill mode to the elements to force them stay at last animation frame (still visible with opacity:1)
-webkit-animation-fill-mode:forwards;
Here the DEMO
I have this animation which I use for a div appear on screen so it comes from the bottom and stays at its final position.
#-webkit-keyframes slide {
from { opacity: 0; -webkit-transform: translateY(500px); }
to { opacity: 1; -webkit-transform: translateY(0); }
}
.module {
-webkit-animation: slide .4s 0 1 normal ease none;
}
I was thinking if it is possible that when I assign class='done' for that div it could take the same animation and play it reversely simulating the same effect hiding the div.
like:
.module.done {
-webkit-animation: slide .4s 0 1 alternate ease none;
}
but it seems it always start from the 1 iteration in the second case I would like to reverse the animation so it could start from the original position and then slide up 500px
Is it possible to achieve using the same animation or do I have to create a new one with inverted values?
Thanks
This specific use case works best with CSS transitions, plus you get free Opera and FF 3.5+ support. This is the basic syntax:
#notice {
-vendor-transition: -webkit-transform 2s ease;
}
#notice.pop {
-vendor-transform: translateY(50px);
}
When you add or remove .pop, the animation is automatically done for you.
Check out the working example:
http://jsfiddle.net/qLKzX/
I believe you can do this by setting the animation-delay to an appropriate negative value (so it starts at the first reversal).