We Keep Coding

Transitions on the CSS Opacity Property

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.

I want to do an animation, but just one time, not to be on a loop [duplicate]

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.

How do I animate React component upon entering the dom?

I have code something like this in react
{this.state.popoverOpen && <Popover/>}
it's easy, but when the component actually appears I want it to come in with opacity changing and animating...
I've been working with react for some time but these cases always leave room for confusion for me...
So whats the best and easy solution? no applying classes work obviously at this point...

You can use CSS transitions. Try adding the fade-in to the className of Popover's outermost HTML element after adding the code below to the relevant CSS file.
.fade-in {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Codepen example: https://codepen.io/rodenmonte/pen/LYpOVpb
Here's a StackOverflow answer showing another (better IMO) way to do this ReactJS: Fade in div and fade out div based on state

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>

How can i make the final state of an animation persist?

I animate the width of an div from 0 to 100%, and after the animation is done i want the final result to persist. Here is what i have until now:
<style>
#element {
background: yellow;
bottom:0;
height:70px;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s;}
#keyframes myfirst {
from {width:0px;}
to {width:100%;}
}
#-moz-keyframes myfirst /* Firefox */ {
from {width:0px;}
to {width:100%;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */ {
from {width:0px;}
to {width:100%;}
}
#-o-keyframes myfirst /* Opera */ {
from {width:0px;}
to {width:100%;}
}
Is there a CSS way or JS to do that?

Use the forwards or both properties:
-webkit-animation:myfirst 5s forwards;
Then the animation will stop at 100% and persist.