How to apply a smooth fade in delay effect - javascript

I was wondering if anyone can provide a solution to this issue I am having, sorry I'm only a beginner at CSS.
Basically, I have a landing page where a youtube video plays in the background and I have some buttons that appear after 8 seconds. These buttons I want them to appear smoothly by fading in. I can't work out how to do this and the current css snippet I have is
.cover .btn-lg {
animation: cssAnimation 0s 8s forwards;
visibility: hidden;
padding: 15px 50px;
font-weight: bold;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
Where and what can I change to get the effect I want, so rather than it just appear - I want it to fade in smoothly.

Transition
Opacity
These two together will allow for the fade effect you desire. It will be hidden by default, add the class .show to your element to start the transition.
.cover .btn-lg {
transition: opacity 8s;
opacity: 0;
padding: 15px 50px;
font-weight: bold;
}
.cover .btn-lg .show {
transition: opacity 8s;
opacity: 1;
}

.cover .btn-lg {
animation: cssAnimation 13s linear;
padding: 15px 50px;
font-weight: bold;
}
#keyframes cssAnimation {
0%{
opacity: 0;
}
38%{
opacity: 0;
}
100%{
opacity: 1;
}
}
<div class="cover">
<button class="btn-lg">Button</button>
</div>

Related

Keyframe animation :hover doesn't obey the "ease-out" part of the animation on mouse-out

I have a 3 chevron animation sequence set up for a back button I designed. The animation triggers on hover exactly the way I want it to but it doesn't respect the ease-out part of the animation property when I hover off of the button. I know that typically with CSS animations you fix this by putting the animation on the actual element and not the :hover state but the problem with that is that the keyframe animation triggers on page load and gets a little wonky on :hover. Is there a mouse-out or hover-out-like state that I could use so that when the user moves away from the button the animation eases out or even reverses? I tried adding animation-direction: reverse; property to the base elements but that doesn't do anything, probably because it doesn't know what animation I'm referring to because it's not present in the base elements for the reasons above. Do I possibly need some CSS or javascript to prevent the animation from triggering until the :hover state actually occurs and then I could place the animation in the base elements instead of the :hover state?
https://jsfiddle.net/astombaugh/L7k1r63f/54/
<body style="background-color: #214365">
<div class="backBtn">
<div class="chevronContainer">
<div class="backBtnChevronTop"></div>
<div class="backBtnChevronMid"></div>
<div class="backBtnChevronFar"></div>
</div>
Back
</div>
</body>
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap');
.backBtn {
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
position: absolute;
left: 4rem;
font-weight: 700;
width: auto;
height: auto;
color: white;
background-color: transparent;
padding: 0.2rem 0em 0.1rem 0em;
margin: 0rem 0rem 0rem 0rem;
text-align: center;
text-decoration: none;
font-size: 1.6em;
word-spacing: normal;
cursor: pointer;
}
.chevronContainer {
display: inline-block;
position: relative;
transform: translateY(-1.3rem) translateX(-1rem);
}
.backBtnChevronTop {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 1;
height: 1.33rem;
width: 1.33rem;
}
.backBtnChevronMid {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtnChevronFar {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtn:hover .backBtnChevronMid {
animation: animateChevronMid 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn:hover .backBtnChevronFar {
animation: animateChevronFar 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronTop {
0% {
transform: translateX(0rem);
opacity: 0;
}
70%,
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes animateChevronMid {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-0.7rem);
opacity: 1;
}
}
#keyframes animateChevronFar {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-1.4rem);
opacity: 1;
}
}
You can probably resolve this by adding the transition on element when there is no hover at the moment and tweak a little the keyframes. Like this:
.backBtn .backBtnChevronMid {
animation: animateChevronMid2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn .backBtnChevronFar {
animation: animateChevronFar2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronMid2 {
0% {
transform: translateX(-0.7rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
#keyframes animateChevronFar2 {
0% {
transform: translateX(-1.4rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
this additional keyframes are exact opposite of the keyframes that you have done. And they do apply when you move your cursor from the element (so on hover off so to speak).
Jacck is right and beat me to it.
You can use that, and add a fadeIn transition to the back button itself. It's hacky but put this on the back button:
animation: fadeIn 0.6s ease-in-out;
And tweak the animation accordingly. It'll run once. If you don't want a fade just move the "stop" close to the end and this controls the container that holds the other animations so your whole effect won't show until it has loaded:
#keyframes fadeIn {
0% {opacity:0;}
95% {opacity: 0}
100% {opacity:1;}
}

Animation on mouse leave

I am struggling at this moment with css animations.
The problem is that I have an entrypoint div that have his own scale animation, and another div that expands and show up a text, and after few seconds collapses again (I've already achieved this).
The main problem becomes when is a requirement to do all this again when the user hovers the entrypoint, when this occurs we have 2 steps.
Hover and show the text again.
When the mouse leaves, collapse the text again after few seconds.
This is my code https://codepen.io/Arm144/pen/JjRWoXQ
HTML:
<div id="chatbotEntryPoint">
<i>
<img class="entry_point_icon" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjJweCIgaGVpZ2h0PSI2MnB4IiB2aWV3Qm94PSIwIDAgNjIgNjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDY0ICg5MzUzNykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+RW50cnktcG9pbnQtcm91bmRAM3g8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8Y2lyY2xlIGlkPSJwYXRoLTEiIGN4PSIyOCIgY3k9IjI4IiByPSIyOCI+PC9jaXJjbGU+CiAgICAgICAgPGZpbHRlciB4PSItOS44JSIgeT0iLTYuMiUiIHdpZHRoPSIxMTkuNiUiIGhlaWdodD0iMTE5LjYlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC40NjI3NDUwOTggICAwIDAgMCAwIDAuNDYyNzQ1MDk4ICAgMCAwIDAgMCAwLjQ2Mjc0NTA5OCAgMCAwIDAgMC43IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSI1Li0tRW50cnktUG9pbnQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJ3ZWJfRW50cnlQb2ludC0vY29tcHJlc3NlZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzNDkuMDAwMDAwLCAtNTg2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iRW50cnktcG9pbnQtcm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNTIuMDAwMDAwLCA1ODcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3ZhbC1Db3B5LTMiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjMUJCM0JDIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM1Ljk2NDg0MzcsMTkgTDIwLjAzODQxMTUsMTkgQzE3LjgxMTg0ODksMTkgMTYsMjAuNzgyODk3OSAxNiwyMi45NzQ2NzA0IEwxNiwzMi4wODc4Mjk2IEMxNiwzNC4yNjY3ODQ2IDE3Ljc5MTAxNTYsMzYuMDQxOTkyMiAyMCwzNi4wNjI1IEwyMCwzOS4zNDM3NSBDMjAsMzkuNjA5MDY5OCAyMC4xNjIxMDkzLDM5Ljg0ODc1NDkgMjAuNDExNDU4NCwzOS45NTAwMTIzIEMyMC40OTQxNDA3LDM5Ljk4MzMzNzQgMjAuNTgwNzI5Miw0MCAyMC42NjY2NjY3LDQwIEMyMC44Mzk4NDM3LDQwIDIxLjAxMDQxNjcsMzkuOTMzMzQ5NyAyMS4xMzgwMjA4LDM5LjgwNzczOTIgTDI0Ljk0MjcwODMsMzYuMDYyNSBMMzUuOTYxNTg4NSwzNi4wNjI1IEMzOC4xODgxNTExLDM2LjA2MjUgNDAsMzQuMjc5NjAyMSA0MCwzMi4wODc4Mjk2IEw0MCwyMi45NzIxMDcgQzQwLDIwLjc4MTYxNjIgMzguMTkwMTA0MSwxOSAzNS45NjQ4NDM3LDE5IFogTTM4LjY2NjY2NjcsMzIuMDg3ODI5NiBDMzguNjY2NjY2NywzMy41NTU0MiAzNy40NTMxMjUxLDM0Ljc1IDM1Ljk2MTU4ODUsMzQuNzUgTDI0LjY2NjY2NjcsMzQuNzUgQzI0LjQ4OTU4MzMsMzQuNzUgMjQuMzIwMzEyNSwzNC44MTkyMTM5IDI0LjE5NTMxMjUsMzQuOTQyMjYwOCBMMjEuMzMzMzMzMywzNy43NTk1MjE2IEwyMS4zMzMzMzMzLDM1LjQwNjI1IEMyMS4zMzMzMzMzLDM1LjA0MzUxODEgMjEuMDM1MTU2MywzNC43NSAyMC42NjY2NjY3LDM0Ljc1IEwyMC4wMzg0MTE1LDM0Ljc1IEMxOC41NDY4NzQ5LDM0Ljc1IDE3LjMzMzMzMzMsMzMuNTU1NDIgMTcuMzMzMzMzMywzMi4wODc4Mjk2IEwxNy4zMzMzMzMzLDIyLjk3NDY3MDQgQzE3LjMzMzMzMzMsMjEuNTA3MDggMTguNTQ2ODc0OSwyMC4zMTI1IDIwLjAzODQxMTUsMjAuMzEyNSBMMzUuOTY0ODQzNywyMC4zMTI1IEMzNy40NTQ0MjcxLDIwLjMxMjUgMzguNjY2NjY2NywyMS41MDU3OTg0IDM4LjY2NjY2NjcsMjIuOTcyMTA3IEwzOC42NjY2NjY3LDMyLjA4NzgyOTYgWiIgaWQ9IlNoYXBlLUNvcHktMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" />
</i>
<span class="entry_point_text">Some text to show</span>
</div>
SCSS:
#chatbotEntryPoint {
display: block;
position: fixed;
width: 60px;
height: 60px;
z-index: 1200;
border-radius: 50px;
background-color: purple;
cursor: pointer;
line-height: 1.4;
i {
float: right;
display: block;
.entry_point_icon {
width: 60px;
height: 60px;
}
}
.entry_point_text {
color: #fff;
font-size: 15px;
padding: 20px;
width: 300px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
&.reveal_text{
animation: text_expand .3s linear .5s forwards,
text_expand .3s linear 3s reverse forwards;
.entry_point_icon {
animation: reveal .2s linear forwards, reveal_resize .2s linear 1s reverse forwards, reveal_resize .2s linear 3s forwards;
}
}
&.reveal_text_hover{
animation: text_expand .3s linear .5s forwards;
.entry_point_icon {
animation: reveal_resize .2s linear 1s reverse forwards;
}
}
&.reveal_text_leave{
animation: text_expand .3s linear .5s reverse forwards;
.entry_point_icon {
animation: reveal_resize .2s linear 3s forwards;
}
.entry_point_text {
opacity: 1;
}
}
}
#keyframes reveal {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes text_expand {
0% {
width: 60px;
}
100% {
width: 400px;
}
}
#keyframes reveal_resize {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
JS
var initEntryPoint = function(){
var entryPoint = document.getElementById('chatbotEntryPoint');
entryPoint.classList.add('reveal_text');
entryPoint.addEventListener('mouseenter', function(){
if( entryPoint.classList.contains('reveal_text')){
entryPoint.classList.remove('reveal_text');
} else {
entryPoint.classList.remove('reveal_text_leave');
}
setTimeout(function(){
entryPoint.classList.add('reveal_text_hover');
},10);
});
entryPoint.addEventListener('mouseleave', function(){
setTimeout(function(){
entryPoint.classList.remove('reveal_text_hover');
entryPoint.classList.add('reveal_text_leave');
}, 3000);
});
};
setTimeout(function(){
initEntryPoint();
}, 1000);
If anyone has any clue about how to make the text collapse again smoothly, and when hover again redo all this, I would really apreciate it.
Thank you so much for your time.

How to create transition with css of text that scrolls in from right and out in left and starts over again without LAG

I'm trying to animate my dashboard with a scrolling text in the footer at the bottom of the screen. Have almost succeeded with some CSS and an absolute position, but it "lags" sometimes, and it's on every computer/screen I tested it on.
How it should work, is that text will scroll in from right side, and scroll out of the screen in the left side.
Css code
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 7rem;
font-family: 'Segoe UI';
font-weight: 500;
display: inline-block;
background-color: #fcfcfc;
color: black;
border-top: 1px solid rgba(217, 217, 217, .5);
text-align: center;
padding-top: 0.5rem;
}
.footer .footer-text {
vertical-align: -webkit-baseline-middle;
white-space: nowrap;
color:black;
font-size: 2.7em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 25.5s infinite;
animation: anim 25.5s infinite;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
#-webkit-keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
#keyframes anim {
from {
right: -300%;
}
to {
right: 100%;
}
}
HTML code
<div class="footer">
<div class="footer-text">
<span>Some scrolling text here</span>
</div>
</div>
It works, but it lags quite often when it runs, you can see the text is not smooth. Tested in Chrome and Firefox (Chrome will be the primary browser where the application will run)
Any possible fix to this, or is it just not possible with css to make these kind of animation?
Btw, I'm using Angular
Hope someone can comment on a possible direction/fix ;)
Try using a CSS transform instead of changing the positioning reference causes the browser to check for page reflows and is very inefficient.
#-webkit-keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}
#keyframes anim {
from {
transform: translateX(300%);
}
to {
transform: translateX(0);
}
}

Adding the fade out to this animation

So I found a really cool animation for social link and I wanted to modify it so that I had the ability to make it also fade out. The original code is here:
.right {
position: relative;
height: 60px;
width: 400px;
float: left;
color: $dark;
padding-left: 10px;
font-size: 30px;
line-height: 60px;
white-space: nowrap;
font-family: 'Montserrat';
animation: popup-text 2s 1 ease-out;
-webkit-animation: popup-text 2s 1 ease-out;
span {
white-space: nowrap;
}
#keyframes popup-text { //change to popup
0% {color: rgba(16,16,16,0); text-indent: -10px}
40% {color: rgba(16,16,16,0); text-indent: -10px}
50% {color: rgba(16,16,16,1); text-indent: 0px;}
100% {color: rgba(16,16,16,1); text-indent: 0px;}
}
#-webkit-keyframes popup-text { //change to popup
0% {color: rgba(16,16,16,0); text-indent: -10px}
40% {color: rgba(16,16,16,0); text-indent: -10px}
50% {color: rgba(22,16,16,1); text-indent: 0px;}
100% {color: rgba(16,16,16,1); text-indent: 0px;}
}
.show-popup {
display: block;
animation: popup 1s 1 ease-out;
-webkit-animation: popup 1s 1 ease-out;
}
#keyframes popup { //change to popup
0% {width: 60px; margin-top: -10px;opacity: 0;}
20% {width: 60px; margin-top: 0px;opacity: 1;}
45% {width: 470px;}
100% {width: 470px;}
}
#-webkit-keyframes popup { //change to popup
0% {width: 60px; margin-top: -10px;opacity: 0;}
20% {width: 60px; margin-top: 0px;opacity: 1;}
45% {width: 470px;}
100% {width: 470px;}
}
.no-popup {
display:none !important;
}
`http://codepen.io/NerdOrDie/pen/vNEvee?editors=0110.
By default the picture drops down and fades in followed by the text shifting right and fading in. I want to change it so after everything fades in wait a couple seconds and then side the text to the left and fade out followed by sliding the picture up and out.
The problem that I ran into was when I tried to edit the key frames to just be mirrored the text didn't display at first and then after the fade out by the logo the text just seems to pop into exsistence for a second before the next animation starts. How would I go about changing this to have the whole animation (both in and out) play properly and then not have the entire thing popping up between animations?
Use the animation-direction css property to indicate whether the animation should play in reverse.
.right {
...
animation-direction: reverse;
}
.show-pop {
...
animation-direction: reverse;
}
You may want to add animation-delay to sync with your next series of images and text.

how would i get the headline to fade in and move up very slightly on page load with css

How would i get the headline to fade in and move up slightly after the user lands on the home page using css. a good example of what i would like to achieve is on this website http://www.mikeinghamdesign.com. Understand it can be done using translateY but I have never used this before.
HTML
<div class="homepage">
<div class="headline">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline">
<h1><span>To the home of</span></h1></div><div class="subheadline"><h1><span>Multimedia Journalist</span></h1></div>
<div class="subheadline"><h1><span>Dan Morris</span></h1></div>
Let's talk
<div class="down-link"><a class="w-downlink" href="#about"><i class="fa fa-chevron-down"></i></a></div>
</div>
CSS
.homepage {
height: 650px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/25H.jpg);
background-attachment: fixed;
float: left;
}
.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
}
Easiest way is to just use a CSS animation:
http://jsfiddle.net/xdbpwoLa/
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.headline {
-webkit-animation: fadeIn .25s ease-in .5s both;
animation: fadeIn .25s ease-in .5s both;
}
#keyframes fade {
from {opacity: 0.2;}
to {opacity: 1;}
}
.headline{
animation-name: fade;
animation-duration: 2s;
}
How it works:
When the headline is loaded, the animation immediately takes effect and causes it to fade from 20% to 100% opacity. We define an animation named fade, then apply it to .headline.
Here is a JSfiddle link where you can test this.

Categories