Adding the fade out to this animation - javascript

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.

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;}
}

How to remove shaking from overflow css animation?

I'm currently doing a React app which shows what music I'm listening at that time. Obviously some of song names, album name etc. are longer than others so I want to show overflowing part with animation. I managed to do this and it's kinda okay. Longer text scrolls nicely but my problem is it also animates short texts and that causes some shaking on them during the animation.
Any ideas how to remove that shaking? Also Javascript based solutions are appreciated but this seemed to be shorter solution.
div {
width: 100px;
border: 1px solid black;
}
div p {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
min-width: 100%;
animation: 5s linear 0s infinite alternate scrolltext;
}
#keyframes scrolltext {
0%,
25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}
<div>
<p>This is a very long text and rolls nicely</p>
<p>And these</p>
<p>two shaking?!</p>
</div>
use margin-left and margin-right instead of left and right
div {
width: 100px;
border: 1px solid black;
}
div p {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
min-width: 100%;
animation: 5s linear 0s infinite alternate scrolltext;
}
#keyframes scrolltext {
0%,
25% {
transform: translateX(0%);
margin-left: 0%;
}
75%,
100% {
transform: translateX(-100%);
margin-left: 100%;
}
}
<div>
<p>This is a very long text and rolls nicely</p>
<p>And these</p>
<p>two shaking?!</p>
</div>

How to apply a smooth fade in delay effect

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>

Grow line from center out on page load with CSS?

I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover
And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)
I have created my line here:
.line {
background: white;
width: 300px;
top: 10%;
height: 3.2px;
margin:auto;
position: relative;
}
And need to have the line grow from the center on page load. How can I do this?
You can use css animation with animation-fill-mode set to forwards, setting #keyframes width from 0% to n%, left from 50% to 5%
body {
width:100%;
}
div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid red;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}
#keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div></div>
#keyframes line_animation {
from {
width: 0%;
}
to {
width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear;
}
Like this
<hr class="line" />
i have utilised display grid and SCSS to configure an authentic border animation
.top-border {
grid-area: tb;
// background: green;
border-bottom: $border-config;
width: 0%;
animation: horizontal-border-animation $animation-duration / 2 forwards;
animation-delay: $animation-delay;
}
.bottom-border {
grid-area: bb;
//to prevent being visible since it is going to be delayed
width: 0%;
// background: yellow;
border-top: $border-config;
animation: horizontal-border-animation $animation-duration / 2 forwards;
// because both right and bottom will start animating after top and left + the intitial delay
animation-delay: $animation-duration / 2 + $animation-delay;
}
#keyframes expand-border-width {
from {
width:0%;
}
to {
width:100%;
}
}
check my sample to gain an explicit clarification
https://codepen.io/ino0r/pen/eYEgvrZ
You don't need keyframes for this if you're just transitioning the effect.
<div class="line"></div>
.line {
width: 0%;
height: 1px;
position: absolute;
left: 50%;
background: #f00;
transition: all 1s;
}
.line:hover {
width: 100%;
left: 0%;
}

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