We Keep Coding

Trying to display animation on click....not working (js, html, css)

I have a loading element that I want to display on the click of a certain button. I have tried various methods including updating the visibility and display, as well as adding a "show" classList to the div onclick (current code). Nothing has worked so far and I am desperate. I would really appreciate any help. Thanks :)
document.getElementById('text-generate-button').onclick = () => {
parent.postMessage({
pluginMessage: {
type: 'placeholder-frame'
}
}, '*')
const loader = document.getElementById('loader');
loader.classList.add("show")
}
.loader {
opacity: 0;
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader.show {
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader-inner {
bottom: 0;
height: auto;
left: 0;
margin: auto;
position: relative;
right: 0;
top: 0;
width: 100px;
padding: 8px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: #EB6A6F;
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: #F6BA48;
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: #B5D643;
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: #50CFD4;
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: #9665D4;
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%,
15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="footer">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>

I didn't dig deep whether there is a better way
but one thing you can do is in your HTML set
<div class="loader" id="loader>
and in your JS
loader.classList.toggle("loader")
here is running version : https://jsbin.com/boromarugo/edit?html,css,js,output
there should be cleaner way but you get the idea

how do I fix the overlay "overflow: hidden;" instead of the entire body

So I have this hamburger menu on the right side of the navbar which when clicked should pop open overlay and be full screen black and un-scrollable(just the overlay) but right now when it's clicked is scrollable and not full screen black, I don't know what went wrong, any help would be really appreciated, thanx!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: black;
color: white;
height: 100%;
width: 100%;
position: fixed;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
Home
About
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

See adjustments to the CSS inline below, but here are the major points:
The overlay should not be using Flexbox. If you want the layout within the overlay to use Flexbox, then set that up on the elements it contains.
The element itself should not be in the HTML as a child of the main content if you are going to size it using percents, because then it will only be as big as the parent. Instead, use vh and vw (Viewport Height and Viewport Width) units.
Set the top and left CSS properties to position the overlay at the top-left of the screen.
Don't use visibility to hide the overlay, use display:none and then display:block to bring it back.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
color: white;
}
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
<div class="menu-overlay">
Home
About
</div>
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Thanks to #Scott Marcus for fixing the layout but the overflow was still not working so I added a toggle-class in js, It works just fine but lemme know otherwise if it contains any DOM errors. Cheers!
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.no-scroll{
overflow: hidden;
}

hide nav based on scroll removing adding classes

I found a nav layout I would like to use but I seem to have run into 2 problems.
problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.
problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following
https://www.battlefield.com/games/battlefield-4/classes
now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition-duration: .4s;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: transform .3s, width .3s;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: transform .3s, width .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Demo
http://jsfiddle.net/gos4hwp9/52/
Explanation
Added transition: all ease-in-out .4s for smooth transitions of all properties
If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
Moving the whole header will move both navs which is nice as compared to moving them individually

I've slightly changed your transitions and added transitions to the classes which you toggle.
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
transition: .3s all;
}
.netnav.show-nav {
top: 0;
transition: .3s all;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition: .3s all;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: .3s all;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: .3s all;
}

I followed the link you provided and edit the JavaScript and CSS.
Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.
You may visit this pen that I edited based on your snippet, and play around with it.
$(window).scroll(function(){
if ($(this).scrollTop() > 15) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('RemoveTop');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('RemoveTop');
$('.mainnav').removeClass('scrolled');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap{
display:block;
position: fixed;
width: 100%;
}
.netnav{
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
transition: all .3s;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0,-40px,0);
transition-duration: .4s;
}
.mainnav{
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: all .3s,width .3s;
width: calc(100% - 60px);
}
.mainnav.RemoveTop {
top: 0px;
}
.mainnav.scrolled {
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Keyframes CSS Animation

Hello I'm trying to simulate flip countdown timer But when I wrote the code I discovered that there was a difference between:
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
and:
#keyframes zindex {
0% {
z-index: 2;
}
100% {
z-index: 4;
}
}
That when I remove 5% the problem will occurred so I'd like to know why this problem ocurres.
Here my code:
body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -25px;
}
ul#initial {
list-style-type: none;
width: 100%;
height: 100%;
padding: 0px;
position: relative;
}
ul#initial li {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
.first {
z-index: 3;
}
.second {
-webkit-animation: zindex 1s 1s linear both;
}
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flipthis {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: #bbb;
transform-origin: 50% 100%;
color: #fff;
animation: flipthis 1s linear;
}
.flipthis-down {
height: 50px;
width: 50px;
background: #0034ff;
color: #fff;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
}
.digit {
height: 200%;
font-size: 80px;
position: absolute;
width: 50px;
text-align: center;
text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flipthis2 {
height: 50px;
width: 50px;
background: #00ff82;
color: #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.flipthis2-down {
height: 50px;
width: 50px;
background: #00f760;
color: #fff;
-webkit-transform-origin: 50% 0%;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis-down {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
a.derp {
-webkit-perspective: 2000px;
display: block;
width: 50px;
height: 100px;
}
<div class="wrap">
<ul id="initial">
<li class="first">
<a class="derp">
<div class="flipthis">
<div class="digit">1</div>
</div>
<div class="flipthis-down">
<div class="digit">1</div>
</div>
</a>
</li>
<li class="second">
<a class="derp">
<div class="flipthis2">
<div class="digit">2</div>
</div>
<div class="flipthis2-down">
<div class="digit">2</div>
</div>
</a>
</li>
</ul>
</div>

The first example reaches the final value of '4' after only 5% of the animation is done, the second example increases the z-index linearly over the specified animation duration.
Adding multiple '%' values tells your browser at what point in time what value should be reached, so your first animation is basically already finished after 5% of the time has passed.

Button starts the application, but not twice

I made this application with a button ("descrição") to open a "gray background" with one text box and two buttons:
"salvar" (save button) and "cancelar" (cancel button), you can only save and close it if you type something inside the box or click on "cancelar", for the first time it works perfectly, but when you start again it doesn't open the buttons or the text box, and it stays on the "gray background".
I'm still new to HTML, CSS, and JS.
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$("#save").click(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
});
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>

If you wanna only fix this bug, try this:
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>

you need to change your JavaScript code as this Fiddle
$('#headerR').on('click', function() {
$('#overlay').fadeIn(500);
$('#overlay-back').fadeIn(500);
});
$(function() {
$("#save").click(function() {
$('#overlay').fadeOut(500);
$('#overlay-back').fadeOut(500);
});
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
}
}
html,
body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay"> <span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text">
</textarea> <button id="save" class="saving myButton" onclick=
"validation();"><span><span>Salvar</span>
<button id="cancel" class="canceling myButton" onclick="validation();">Cancelar</button>
</span>
</button>
</span>
</div>