Transitions on the CSS Opacity Property - javascript

I'm currently designing a CSS text fade-in so it fades the next line of text after a few seconds - basically a regular CSS-only opacity transition, but one that also includes an embedded iframe.
At the moment, it appears that CSS 3 opacity does not apply to the 'iframe' property, i.e., you can't add an iframe before the closing 'div' or add 'iframe' to the opacity (or any combination).
Is there a way to allow the text to fade in then time the appearance of the 'iframe' youtube video followed by the third piece of text on a page?
I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.
I was able to do this with JQuery but that requires a special function just for the iframe video. Anything else just failed miserably.
I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.
<style>
#fade p iframe {
margin-top: 25px;
text-align: center;
animation: fadein 20s;
-moz-animation: fadein 20s; /* Firefox */
-webkit-animation: fadein 20s; /* Safari and Chrome */
-o-animation: fadein 20s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
</style>
<div id="fade">
<p>lorem ipsum factorum
<iframe src="..."></iframe>
</p>
</div>
The code above works fine for TEXT ONLY. The opacity fades in over time, but the desired effect would be that the text fades in first, followed by the video (or at the same time) below the fading text.

Related

How to trigger anchor tag :target action even at same position?

I have some anchor tags that glow in yellow for 3 seconds and fadeout when they are clicked upon.
Here is my css:
.highlight:target {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
#keyframes fadeoutBg {
from {
background-color: yellow;
} /** from color **/
to {
background-color: lightgray;
} /** to color **/
}
However, this target animation only triggers if I am not at the same level as the anchor tag.
For example:
First
<div class="highlight" id="first">Target</div>
If I click on the link <a>, it redirects me to the position of Target, and shows the yellow fadeout effect on the <div>. However, if I click on the href link again, no effect is shown presumably since I am already at the corresponding anchor position. Is there any way to trigger the yellow fadeout effect even if I just clicked on the href and I am at the same level as the anchor tag?
Thanks!
You can use JavaScript, to trigger the reflow, between removing and re-adding the class name
a = document.getElementById("a");
a.addEventListener("click", function(e) {
e.preventDefault;
div = document.querySelector(".highlight");
div.classList.remove("highlight");
void div.offsetWidth; //The Reflow
div.classList.add("highlight");
}, false)
.highlight:target {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
#keyframes fadeoutBg {
from {
background-color: yellow;
} /** from color **/
to {
background-color: lightgray;
} /** to color **/
}
<a id="a" href="#first">First</a>
<div class="highlight" id="first">Target</div>

#keyframes animation text fade and shine

I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.

easeInOutQuad with a fade in

I have searched for a couple hours now and cant seem to find the correct solution to this. I need to fade in a background image after its loaded. The loading and fadeIn() works with the code i have pasted but it is choppy. So i want to use easeInOutQuad with fadeIn() to see if its smoother. (the reason it is choppy is because there is other script at work doing other things at the same time).I tried this:
$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){});
But it did not work .
var backgroundImage = $(currentWing).data("background-url");
var bgimage = new Image();
bgimage.src = backgroundImage;
$(bgimage).load(function(){
$(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadeIn(1000);
});
It seems you are looking to load an image with fade-in effect.
You may do this either with javascript or with CSS
Javascript:
Simply hide the image once loaded and use fadeIn() to make it appear again with a fade effect.
$(".jsfade").hide(0).delay(500).fadeIn(3000)
Where .jsfade is the class attached to an image
CSS:
You can also use CSS animations to change the opacity of the image to create a fadeIn effect. For an image with .fade class,
<img src="image.jpg" class="fade" />
You can define the css classes as follows
.fade {
opacity: 1;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.fade:hover {
opacity: 0.5;
}
UPDATE:
jQuery UI specifies the following signature for show/hide/fadeIn functions
.show( [duration,] [easing,] [callback] )
Having said that, following is the code with different easing options
$(".jsfade").fadeIn(3000, 'linear') //WITH LINEAR AS EASING OPTION
$(".jsfadeEaseinOutQuad").fadeIn(3000,'easeInOutQuad') //with easeInOutQuad as the easing option.
So, the reason why $(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){}); doesnt seem to work is because your content is probably already visible and hence fadeIn() will essentially do nothing. To See the effect, you need to hide the elements first and then apply the fadeIn().
Use the css property display:none to hide .wings-wrapper
Here's the UPDATED plunkr with both approaches.

I want to make a word disappear after it performs a CSS animation during a mouseover

I am trying to get my code to play an animation (one word falling to the bottom of the page before disappearing), when a mouse hovers over a word in a class div, and after that have it disappear for good.
The CSS 'visibility property' allows me to choose whether the word is visible or not, but when dealing with 'class:hover' like I am, the word comes back when the mouse is not hovering over the word's position. Same with 'display: none';
When JavaScript (document.getElementById("myP").style.visibility = "hidden";) is applied with the help of onmouseover, the word will disappear without playing the CSS animation. Is there a way I can have the word perform the animation and then have it disappear from the page?
I can't show you my current code, as I'm using it in a final project soon. I'll provide an outline of it though:
<style>
.word:hover{
/*This makes the words fall to the bottom of the screen.*/
-webkit-animation-name: fallDown;
-webkit-animation-duration: 6s;
animation-name: fallDown;
animation-duration: 6s;
}
#1{
position: absolute;
left: 200px;
top: 200px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fallDown {
0% {animation-timing-function: ease-in;}
100% {top:97%; display: none;}
}
/* Standard syntax */
#keyframes fallDown {
0% {animation-timing-function: ease-in;}
100% {top:97%; display: none;}
}
</style>
</head>
<body>
<div class="word" id="1"> Falling </div>
</body>
Please let me know if you have any ideas.
You need animationend - Event reference, it is fired when a CSS animation has completed.
$('.word').hover( function(){
$(this).addClass('animated').on('animationend webkitAnimationEnd', function(){
$(this).hide();
});
});
here is the css
.animated {
-webkit-animation: fallDown 6s;
animation: fallDown 6s;
}
DEMO (Use full page mode to see it)
$('.word').hover( function(){
$(this).addClass('animated').on('animationend webkitAnimationEnd', function(){
$(this).hide();
});
});
/* Chrome, Safari, Opera */
#-webkit-keyframes fallDown {
to {top:97%; display: none;}
}
/* Standard syntax */
#keyframes fallDown {
to {top:97%; display: none;}
}
.word{
position: absolute;
left: 200px;
top: 200px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated {
-webkit-animation: fallDown 6s;
animation: fallDown 6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word"> Falling </div>

CSS animation reverts to original state

document.getElementById("clicky").addEventListener("click", changeMe);
function changeMe() {
var ele = document.getElementById("item");
ele.className= "hide";
}
#clicky{cursor:pointer;}
.hide {
animation: fadeout 1s ;
-webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
/* Standard syntax */
#keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
<a id="clicky">Click me</a>
<br /><br />
<div id="item">I should go bye byes!<br />But instead, I return!!!</div>
I have seen the similar questions aready, such as css3 animation keep reverting to original state
Most of them suggest adding -webkit-animation-fill-mode: forwards; which I have but it doesn't fix the issue because I'm trying to do this in IE 11.
Every time my animation runs, it reverts back to the original state.
It works fine in Chrome, but I need this in IE 10+.
Just add
animation-fill-mode: forwards;
which is the standard syntax for the webkit prefixed version you are using.
http://jsfiddle.net/d2d46zf8/7/

Categories