Develop Reference

Can't integrated a pen

I would like copy a custom select box from here --> https://codepen.io/microfront/pen/NXGrGQ into my website,
but it's not work when I paste the whole code.
I can't figure out how. I tried to copy all the html, css and java but doesn't work, then I even tried to convert scss to css still not working
I have this result from any navigator screenshot
body {
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0 15px;
}
h1 {
font-size: 50px;
line-height: 54px;
text-align: center;
margin: 100px auto 60px;
max-width: 600px;
}
/*Chosen style*/
.chosen-wrapper {
margin: 0 auto 25px;
max-width: 400px;
position: relative;
}
.chosen-wrapper:after {
pointer-events: none;
content: "";
position: absolute;
top: 32px;
right: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 9;
}
.chosen-wrapper.is-active:after {
border-top: 8px solid black;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.chosen-wrapper .chosen-container .chosen-single {
border-radius: 0;
height: 70px;
border: solid 2px #d9d9d9;
background: #fff;
font-size: 22px;
color: rgba(0, 0, 0, 0.5);
padding: 0 30px;
line-height: 66px;
transition: all 0.3s ease;
box-shadow: none;
background: #fff;
}
.chosen-wrapper .chosen-container .chosen-single b {
display: none !important;
}
.chosen-wrapper .chosen-container .chosen-single span {
letter-spacing: 0;
padding: 0;
line-height: inherit;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-single {
border-width: 2px 2px 1px;
border-color: #000 #000 #d9d9d9;
color: #000;
background-image: none;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.chosen-wrapper .chosen-container.chosen-container-single-nosearch .chosen-search {
display: none;
}
.chosen-wrapper .chosen-container .chosen-drop {
letter-spacing: 0;
border-radius: 0;
box-shadow: none;
border-width: 0 2px 2px;
border-color: #000;
margin-top: 0;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
opacity: 0;
}
.chosen-wrapper .chosen-container .chosen-results {
font-size: 22px;
color: #000;
max-height: 245px;
margin: 0;
padding: 0;
}
.chosen-wrapper .chosen-container .chosen-results li {
padding: 16px 30px 18px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
line-height: 20px;
}
.chosen-wrapper .chosen-container .chosen-results li.highlighted {
background-color: #eeeeee !important;
color: #000;
background-image: none;
}
.chosen-wrapper--style2:after {
right: 0;
}
.chosen-wrapper--style2:before {
content: '';
width: 0;
border-top: 2px solid #000;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all 0.2s cubic-bezier(0.06, 1, 0.89, 0.85);
}
.chosen-wrapper--style2.is-active:before {
width: 100%;
}
.chosen-wrapper--style2 .chosen-container .chosen-single {
border-width: 0 0 2px;
padding: 0;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-single {
border-width: 0 0 2px;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.chosen-wrapper--style2 .chosen-container .chosen-drop {
border-color: #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.chosen-wrapper--style2 .chosen-container .chosen-results li {
padding: 16px 15px 18px;
}
/*ScrollBox style*/
.nicescroll-rails {
border-left: 1px solid #d9d9d9;
transform: translate(-2px);
top: 0 !important;
}
.nicescroll-rails .nicescroll-cursors {
width: 6px !important;
margin-right: 2px;
}
.link {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
}
.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
}
.link .fa {
font-size: 28px;
margin-right: 8px;
color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Responsive custom select box</h1>
<!--Style 2-->
<div class="chosen-wrapper chosen-wrapper--style2">
<select class="chosen-select" data-placeholder="Lorem ipsum dolor sit amet">
<option></option>
<option>Consectetur adipiscing</option>
<option>Sed do eiusmod tempor</option>
</select>
</div>

Animate from top not working with negative value?

EDIT
Solved it. See post below.
/ END OF EDIT
EDIT
NOT related to the suggested topic above and not solved by changing to vh as measurement of top-value instead as shown in this fiddle (as suggested by the first comments here): http://jsfiddle.net/wm02ovx8/3/. The div still doesn't animate in, but rather pops up in the blink of an eye.
/ END OF EDIT
I'm trying to animate a drawer div from top and into view. The animation works fine as long as it's in view to begin with (the "top" css property value being more than -1), but since I have a negative value that is calc(-100% + 30px) on the top property it just "pops up" instead. What am I missing here?
[Fiddle] (To open the menu, press the index word on the right)
HTML:
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS:
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}
Javascript:
function showIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos <= 0) {
pos++;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
function hideIndex() {
var elem = document.getElementById("alignLinks");
thestyle = window.getComputedStyle(elem),
thetop = thestyle.getPropertyValue('top');
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 0) {
pos--;
elem.style.top = pos + 'px';
} else {
clearInterval(id);
}
}
}
document.getElementById("indexMenu").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "block";
showIndex();
});
document.getElementById("closeIndexLayer").addEventListener("click", function(){
var closeIndexLayer = document.getElementById("closeIndexLayer");
closeIndexLayer.style.display = "none";
hideIndex();
});
//</editor-fold>

I solved it another way instead, and in a way I'm more familiar with. The way I found that worked for me adds a class to the element and that class have animation properties. Then if you want to animate out, just add the animation properties to the element that is being animated (in this case the id #alignLinks).
[Fiddle]
Javascript:
let drawer = document.getElementById("alignLinks");
document.getElementById('indexMenu').onclick = function() {
if(this.innerHTML === 'Index')
{
this.innerHTML = 'Close';
drawer.classList.add('topAnimDown');
} else {
this.innerHTML = 'Index';
var computedStyle = window.getComputedStyle(drawer),
topProp = computedStyle.getPropertyValue('top');
drawer.style.topProp = topProp;
drawer.classList.remove('topAnimDown');
}
}
HTML
<div id="closeIndexLayer"></div>
<div id="alignLinks">
<div id="anchorLinks"></div>
</div>
<div id="indexMenu">Index</div>
CSS
body {
background: hotpink;
}
div#alignLinks {
position: fixed;
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-flow: wrap;
left: 30px;
top: calc(-100% + 30px);
background: rgba(255,0,0,.60);
/* transform: translateX(-50%); */
height: calc(100% - 30px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
z-index: 250 !important;
min-width: 425px;
max-width: 425px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
.topAnimDown {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;
top: 0 !important;
}
div#anchorLinks {
display: flex;
/* position: fixed; */
flex-flow: wrap;
height: auto;
/* position: absolute; */
/* background: rgba(0,0,0,.5); */
top: 0px;
right: 0px;
z-index: 250;
}
div#closeIndexLayer {
position: fixed;
display:none;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
background: green;
z-index: 250;
}
a.anchorLink {
width: auto;
background: hsla(210, 11%, 8%, 1);
border-radius: 3px;
text-decoration: none;
font-size: 2rem;
margin-top: 16px;
margin-bottom: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 140ms ease-in-out;
-moz-transition: all 140ms ease-in-out;
-ms-transition: all 140ms ease-in-out;
-o-transition: all 140ms ease-in-out;
transition: all 140ms ease-in-out;
}
#indexMenu {
position: fixed;
display: block;
z-index: 249;
top: 50%;
height: 18px;
right: -18px;
padding: 0px 6px 0px 6px;
transform: translateY(-50%) rotate(270deg);
background: rgba(255,255,255,.15);
border-radius: 5px 5px 0px 0px;
font-family: 'Nunito Sans', sans-serif;
font-size: 24px;
box-shadow: 0px 1px 2px rgba(255,255,255,.12), 0px 2px 3px rgba(255,255,255,.24);
cursor: pointer;
}

Popup Not Center of Screen - CSS Issue

I've adapted some code that I have sourced which shows a popup after X seconds. The JavaScript functionality seems fine, the issue is that whatever I try I am unable to center the popup in the middle of the screen.
Please see the popup here:
http://ts564737-container.zoeysite.com/
I have tried wrapping the popup in another div, setting that div to width: 100% andposition: fixed then setting the popup container to margin: 0 auto, without success.
I have also tried various display and position properties. What I understand is that the popup container doesn't have anything to be the center of, which is why I tried to wrap it inside another div but I'm unable to make this work as I wish.
Please see my code below:
CSS:
#wd1_nlpopup {
display: none;
position: absolute;
margin: 0 auto !important;
top: 200px !important;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}
HTML:
<div id="wd1_nlpopup" data-expires="30" data-delay="1">
X
<script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"></script>
</div>
JavaScript:
jQuery(document).ready(function(jQuery){
var wd1_nlpopup_expires = jQuery("#wd1_nlpopup").data("expires");
var wd1_nlpopup_delay = jQuery("#wd1_nlpopup").data("delay") * 1000;
jQuery('#wd1_nlpopup_close').on('click', function(e){
jQuery.cookie('wd1_nlpopup', 'closed', { expires: wd1_nlpopup_expires, path: '/' });
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeOut(200);
e.preventDefault();
});
if(jQuery.cookie('wd1_nlpopup') != 'closed' ){
setTimeout(wd1_open_nlpopup, wd1_nlpopup_delay);
}
function wd1_open_nlpopup(){
var topoffset = jQuery(document).scrollTop(),
viewportHeight = jQuery(window).height(),
jQuerypopup = jQuery('#wd1_nlpopup');
var calculatedOffset = (topoffset + (Math.round(viewportHeight/2))) - (Math.round(jQuerypopup.outerHeight()/2));
if(calculatedOffset <= 40){
calculatedOffset = 40;
}
jQuerypopup.css('top', calculatedOffset);
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeIn(500);
}
});
/* jQuery Cookie Plugin v1.3.1 */
(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a);}else{a(jQuery);}}(function(e){var a=/\+/g;function d(g){return g;}function b(g){return decodeURIComponent(g.replace(a," "));}function f(g){if(g.indexOf('"')===0){g=g.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\");}try{return c.json?JSON.parse(g):g;}catch(h){}}var c=e.cookie=function(p,o,u){if(o!==undefined){u=e.extend({},c.defaults,u);if(typeof u.expires==="number"){var q=u.expires,s=u.expires=new Date();s.setDate(s.getDate()+q);}o=c.json?JSON.stringify(o):String(o);return(document.cookie=[c.raw?p:encodeURIComponent(p),"=",c.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join(""));}var g=c.raw?d:b;var r=document.cookie.split("; ");var v=p?undefined:{};for(var n=0,k=r.length;n<k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&&p===h){v=f(j);break;}if(!p){v[h]=f(j);}}return v;};c.defaults={};e.removeCookie=function(h,g){if(e.cookie(h)!==undefined){e.cookie(h,"",e.extend(g,{expires:-1}));return true;}return false;};}));
Would anybody please be able to advise on where I'm going wrong with my CSS? Any help is very much appreciated. Thank you for your time.

Add this css to your #wd1_nlpopup
{
top: 50%;
transform: translateY(-50%);
width: 600px; // add a size for your modal
left: 0;
right: 0;
}
The final css:
#wd1_nlpopup {
display: block;
position: absolute;
margin: 0 auto !important;
top: 50%;
transform: translateY(-50%);
right: 0;
left: 0;
width: 600px;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}

wd1_nlpopup {
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}

By just a quick lookup !! try the below css. Change this to your css, hope it helps
#wd1_nlpopup {
margin: 10% 38% !important;
top: 0px !important;}

Modal not working with ie8

I looking to get some help with this. I am having issues with a modal not working correctly in IE8. Can anyone help me out or tell me how to create modal that work in ie8. I am up to any suggestions etc.
Thanks you.
Here my code:
HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

I think adding this will solve the problem:
-ms-transition: opacity 400ms ease-in;
webkit transitons are not well supported by IE
check this for further details.

CSS Transition not working with visibility:hidden

I have an html/css/javascript page that works perfectly except for the first time. Basically, the divLUMProvideZipCode starts with the hidden class, but when you press the button it will become visible. The problem is that it doesn't fade in like it should, it just appear immediately, without any transition. After that, it works perfect, but chances are the user will only press the button once, twice tops so to get the effect, it needs to work the first time. Anyone got any ideas?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leads User Maintenance</title>
<link rel="stylesheet" type="text/css" href="LeadsMaintenance.css"/>
<script>
function changeClass() {
var doc = document.getElementById("divLUMProvideZipCode");
if (doc.className.indexOf("hidden") >= 0)
{
doc.className = "visible solidShadowBox";
}
else
{
doc.className = "hidden";
}
};
</script>
</head>
<body>
<div class="centeredBodyWrapper">
<div id="divLUMNavigation" class="solidShadowBox">
<button onClick="changeClass()">Show Me</button>
</div>
<div id="divLUMUserSelect" class="solidShadowBox">
</div>
<div id="divLUMUserInformation" class="solidShadowBox">
<div id="divLUMProvideZipCode" class="hidden solidShadowBox">
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
.centeredBodyWrapper {
margin: auto;
width: 960px;
}
#divLUMNavigation {
width: 100%;
height: 50px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMUserSelect {
width: 100%;
height: 50px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMUserInformation {
width: 100%;
height: 640px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
}
#divLUMProvideZipCode {
width: 200px;
height: 350px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
position: relative;
top: 0px;
left: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
}
.solidShadowBox {
-webkit-box-shadow: 0px 0px 8px 0px #909090;
-moz-box-shadow: 0px 0px 8px 0px #909090;
-o-box-shadow: 0px 0px 8px 0px #909090;
-ms-box-shadow: 0px 0px 8px 0px #909090;
box-shadow: 0px 0px 8px 0px #909090;
}
.hidden {
visibility: hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
}
.visible {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
ms-transition: all 1s;
transition: all 1s;
visibility: visible
}

Try using opacity:0 in your hidden class and opacity:1 in your visible class instaed of doing transition on visibility

.hidden { height:1px; overflow:hidden; opacity:0;}
.visible { height:auto; opacity:1; overflow:visible; }
Try that.