media-queries,transition,css-animations , How to make smooth media-query transition back and forth?


How to make smooth media-query transition back and forth?

Question:

Tag: media-queries,transition,css-animations

I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried visibility, opacity and height transition.

If you look at this code below, you'll see that when going from larger screen to smaller, there's sort of delay that appears before fading out, then height animation plays. However, if you go from smaller window to larger, it transitions like 2x faster. I'm not sure how to make it reverse, so animation is smooth going back and forth. I tried to play with numerous snippets from the web, but nothing let's me control the animation properly.

My idea is to hide logo on mobile devices, but when ppl flip a tablet, a nice transition would let logo appear for larger screens (and not only mobile, just re-sizing desktop browser would make it look more professional). Hope you can help.

.wrapper {
	width: 500px;
	background-color: #0C6;
}
.nav {
	background-color: #69C;
}
.logo {
	max-height: 0px;
	background-color: #FC3;
	  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
	visibility: hidden;
	opacity: 0;
}	
@media screen and (min-width: 500px){
.logo {
	max-height: 200px;
	visibility: visible;
	opacity: 1;
}	
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>

<body>
<div class="wrapper">
  <div class="logo">logo<br>
    <br>
    <br>
    <br>
  </div>
  <div class="nav">nav</div>
</div>
</body>
</html>


Answer:

Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier.

.wrapper {
	width: 500px;
	background-color: #0C6;
}
.nav {
	background-color: #69C;
}
.logo {
    height: 0px;
    background-color: #FC3;
    visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
	-moz-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
    -o-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
    transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
}	
@media screen and (min-width: 500px){
.logo {
    height: 100px;
    visibility: visible;
	opacity: 1;
	-webkit-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
	-moz-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
    -o-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
    transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
}	
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="wrapper">
  <div class="logo">logo<br>
    <br>
    <br>
    <br>
  </div>
  <div class="nav">nav</div>
</div>
</body>
</html>

Thanx to the following: http://www.greywyvern.com/?post=337 and Rémi Breton answer at: CSS transition shorthand with multiple properties?

hope this can be useful for others as well!


Related:


How to make page layout responsive for every successive little change in window size?


javascript,css,responsive-design,media-queries
Yes, I know how to use media queries. But it allow us to specify min-width and max-width that is range after which css will change. But consider this website styledotme.com The block/div just below navigation bar keeps getting smaller and smaller almost as if pixel-by-pixel as we decrease window size....

Responsive issue. Websites remains big while elements scale


html,css,wordpress,mobile,media-queries
I am currently working on making a website responsive. However i am experiencing an issue which i can't seem to figure out. The website i am working on is: http://www.vouwwagencentrumnoordbergum.nl/ So, when you visit the website on a mobile phone or you just scale your browser, most of it (...

Media Query styles not working


css,media-queries,breakpoints
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this? HTML <div class="headDiv"> <div class="headPhone"> <p class="fa...

Table Widths Strangely Shrinking on Mobile


html,css,table,media-queries
I'm having an odd error with a website I'm designing where the mobile version/size has tables getting progressively smaller. I've checked and it's not an issue of tags being unclosed or malformed html; the code validates in html5. I don't get this error in the desktop or tablet versions, but...

Transition between decimal or double numbers


java,android,numbers,transition
Imagine a number 10, then after user clicks a button it changes to 100. But how to make an efficient transition 10 -> 100, that will display values like 12, 15, 18, ..., 97, 100 over 1 second. I've seen something like that in "Cookie clicker" but couldn't find anything...

@media Orientation Width


css,media-queries,screen-orientation
When specifying min-width and min-device-width media queries, is the width you declare based off the current width of the phone or the potrait width of the phone? For example, an iphone4 has a width/height of 320x480 in standard/portrait orientation and has a device-width of 320. If the phone is held...

Problems with transition on flex: 0, but still working on flex: .0001?


css,transition,flexbox,value
While working on a little project, I stumbled into having to transition from flex: 1to flex: 0. It took me a while to understand that it was only for this that the result was broken. After testing a bit I've found out that flex is transitionable, but not if one...

CSS: Skew a buttons border, not the text


css,button,transition,effect,skew
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is. I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML...

Trying to get a website to zoom 120% when screen resolution is greater than 1600px


html,css3,media-queries
I'm working on an website, and someone asked me if it was possible to zoom the entire website when someone has a screen width of 1600px or greater. Now i've tried something with css3 and mediaqueries, and i've read alot on the internet, but I can't seem to get it...

How to make my nav bar responsive


html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

When scaling menu comes behind the div, why?


html,css,media-queries
I have a menu, en a div with a background color. But when scaling the menu comes behind the div. But it has to push the div down when scaling. The #blauwblok has to be position absolute because somehting else has to come over the div, but not the menu....

i am looking to apply media queries through javascript


javascript,media-queries
I want to slide the divs of menu from left to right,I have done that using javascript <div id="script" style="height: 250px;"> <div class="slide"> <div id="div1" class="slide-item"> <p>Home</p> </div> </div> <div class="slide"> <div id="div2" class="slide-item"> <p>About Us</p> </div> </div> <div class="slide"> <div id="div3" class="slide-item"> <p>Events</p> </div> </div> <div class="slide"> <div id="div4"...

Mobile/Desktop media query not working on cell phone


html,css,media-queries
Last night I worked on making my site mobile optimized. When a user is on a device with less than 684px it should show the mobile nav div and hide the sidebar div. I have tested this as working on my computer (by shrinking chrome like an accordion). I also...

Hide multiple Dropdown boxs using CSS for printing


c#,jquery,css,media-queries
On my c# mvc page, I have several dropdown boxs displayed on the page, I'm using media query to render the view differently for print and screen. My question is that is there a way (using CSS) to hide ALL the dropdown boxs if the selected option value is ""....

jQuery show a hidden DIV based on CSS element and slideToggle() state property


jquery,html,css,responsive-design,media-queries
I need some support into finishing a jQuery function I am struggling with for quite some time. I have an HTML content in a div with classes mnu2 mob_hide. This content should be always visible for page width more than 500px and hidden if the width is less that 500px....

When do we use media-queries “resolution” in css?


css,media-queries,resolution
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?

JQuery FadeIn with every 2nd click


javascript,jquery,html,css,transition
I'm trying to create a Burgermenu, an easy dropdown without any animations. After this I tried to let this dropdown fade in on click with the following script: <script> $('span.nav-button').click(function(){ console.log("information: click!"); $(".burgermenu").fadeIn(500); }); </script> Because of this I can no longer close the menu, the menu tries now to...

Using rulesets in LESS for media queries


less,media-queries
When using Sass I would do something global like this (which I got from CSS-tricks btw) // Variables for MQ's $mq-mobile-portrait : 320px !default; $mq-mobile-landscape : 480px !default; $mq-tablet-portrait : 768px !default; $mq-tablet-landscape : 1024px !default; $mq-desktop : 1382px !default; Then I would create mixins for the media queries like...

CSS media-query to squeeze image into container


css,css3,responsive-design,media-queries
I am forced to work with a table-based layout and need to make it responsive. Am struggling with images: when the image-width exceeds the screen-width, it should shrink to fit on the screen. In several articels here I found max-width being recommended, but somehow I'm not getting it to work....

Media query not triggering


html,css,media-queries
I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major. <html> <HEAD> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> <!-- body {background-color:black;...

Transition partition arcs back to original angles


d3.js,transition
How can I transition arc angles, initially defined by d3.svg.arc(), back to their original values when using d3.layout.partition? I am trying to store the initial startAngle and endAngle values d.x and d.dx somewhere so that I can transition back to them at a later state. However, I do not know:...

CSS background-color transition not working in specific browsers (desktop + mobile)


css,safari,mobile-safari,css-transitions,transition
I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers. See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy (Click on the photo or note text to activate the transition. It's more obvious if you click on the text.) .overlay {...

Transition effect on expanding UL [closed]


javascript,html,css,transition
How do i add a transition effect on this expanding list? <div class="container"> <div class="outerBG"> <div class="innerBG"> <h2 class="info">&#10148; Show text</h2> <ul id="infoContent" style="display:none"> <li>TEST 1 TEST 1 TEST 1 TEST 1</li> <li>TEST 2 TEST 2 TEST 2 TEST 2</li> </ul> </div> </div> </div> I'm using JavaScript to toggle the...

Div Text's Color Changes when Printed


html,css,css3,media-queries,media
I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

Standard resolution sizes to optimize for


css3,responsive-design,media-queries
I'm working on one of my first responsive websites and I'm trying to figure out for what kind of resolutions to optimize for. Is there any standard or what? What are your practices? It would be nice to know....

CSS margin-left transition not working


css,margin,transition
I'm trying to do a transition from the center to left and reduce the height of an image. The height transition is working fine, but the margin just teleports to the left instead of animating. this is my code: #logo_img { height: 55px; width: 55px; background-color: red; margin-left: auto; margin-right:...

Why don't elements display inline-block again after a resize down and up in Chrome?


html,css,google-chrome,responsive-design,media-queries
I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other. I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and...

How to use javascript to transition a property from a set attribute to a new attribute


javascript,css,progress-bar,transition
I am working an a project which requires a custom progress bar using only html, css, and javascript. I want to be able to set an initial condition on the progress bar and have it start at the proper place. Example: I have a timestamp for when something started and...

horizontally align image/content with media query


css,twitter-bootstrap,media-queries
I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it. <div class="row"> <div class="col-md-2"> <img src="http://placehold.it/150x150"> <h5 class="story-title">Title of...

JavaFX Transition Equivalent


java,javafx,transition,equivalent,interpolate
I have a non-gui application where I want to asynchronously interpolate some data over time. I had a look at the JavaFX Transition API and it looked ideal. However, for the transitions API to work it has to be run as part of a JavaFX application context - which I...

Why is transform:scale not kept on :hover?


css,transition
I am using this CSS: .link { transition: all .2s ease-in-out; } .link:hover { transform: scale(1.1); } When I hover the text, it's scaled to 110% as expected, but as soon as the transition is finished, it scales back to 100% even though the mouse pointer is still on the...

Responsive Web Design without showing mobile layout when resizing desktop browser?


html,css,media-queries
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and...

How to Remove class or activate class for specific view port only


css,mobile,media-queries,viewport,tablet
Not sure if this would require Javascript, or if there is a way to do this with CSS alone. Basically I want to have a class active only for medium and small size browswers. Example: <style> .big {font-size: 2em;} .normal {font-size: 1em;} </style> <div class="big"> <p> This text is huge...

Input transition


html,css,transition
I try to animate my search button. When you click on it, it should expand and slide to the side. The animation is no problem in css, but in front of the search bar is a div, which does not follow the expanding search bar. <form> <div class="test"></div> <input type="search"...

Lightbox with transition


css,css3,transition,lightbox
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is <a href="#_" class="lightbox" id="img1"> <img src="images/photo.jpg"> </a> And my style: .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width:...

How to make smooth media-query transition back and forth?


media-queries,transition,css-animations
I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried...

Ease effect when Page loaded


javascript,html,css,transition
I want my logo to have the following saturation effect with ease-out once the page loaded. Is this possible? Or does it only works with "hover"? Here is my code: /* CSS*/ #logo { -moz-transition: all 7s ease-out; -o-transition: all 7s ease-out; -webkit-transition: all 7s ease-out; -ms-transition: all 7s ease-out;...

How do you force a website to be in landscape mode when viewed on a mobile device?


css,asp.net-mvc,mobile,responsive-design,media-queries
I've seen a lot of questions about this, but no definitive answer on how to do this in a Razor/MVC site where the mobile site is determined using the DefaultDisplayMode class. Also, a lot of the answers are just code snippets without details on where the code goes (is it...

How to use media query with div as screen for mobile preview in desktop website?


html,mobile,media-queries,screen-size
I need to show a preview of the code responsive in a div that has the size of a mobile phone, how can I use media queries? or i can do it with jquery? Thanks a lot !

Differentiating portrait and landscape versions in media queries


css,html5,css3,media-queries
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)? @media only screen and (min-width : 1824px) {} @media only screen and (min-width: 1200px) and (max-width: 1823px) {} @media only screen and (min-width: 992px)...

Fragment Transactions with transition - Unique transitionNames are required


android,transactions,fragment,transition,android-transitions
I want to go from a list view to the detail view and therefore, I use following OnClickListener in my list: @Override public void onClick(View view) { Bet bet = (Bet)view.getTag(); FragmentManager fm = getActivity().getSupportFragmentManager(); BetDetailFragment f = BetDetailFragment.create(bet); String tag = f.getClass().getName(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move));...

Change media query using Javascript


javascript,css,responsive-design,media-queries
I want to set media queries manually. I have some JavaScript algorithm that tells me what to choose, suppose it is IsMediaA(). @media A { display: block; } @media B { display: inline-block; } Is it possible to change used media query depending on IsMediaA() value?...

Css media queries quesitons


css,media-queries
Hi I created a sample site as practice... why my < h3 id="art" > going down to footer section while shrinking my screen under 620 width and also, theres large space will show.. How to remove the space under footer and I dont want my words going to footer either...

Media Queries div works but others do not


html,css,media-queries
I am trying to do media queries for iPhone. However, for some reason the information in the "mobile" div does not show up, the only thing that shows is the background image. Any help given is appreciated. Thanks in advance. HTML: <div id="wrap"> <div id="header"> <p id="placeholder"> full-site<br>coming soon<span>.</span><span>.</span><span>.</span> </p>...

How to properly join a few Media queries


css,media-queries
I have a situation and I decide to use media queries. The htmlcode: ... <span class="logotext-n">n</span> . . <span class="logotext-u">u</span> ... Css implementation: ... @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-n { color: #f1ecd6; font-family: "arial black", sans-serif; font-weight: 900; font-size: 210px; text-transform: lowercase; letter-spacing: -18px; } } . . @media...

Polymer 1.0 dom-if does not recalculate when previously true


media-queries,polymer
I have the following component that displays a specific image based on a media query. What I'm expecting to see is when the window is resized, that a different image will be loaded and displayed, and all other sizes "hidden". What I'm getting though, is that the new image is...

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile


mobile,responsive-design,media-queries,viewport,initial-scale
So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have...

javafx using translatetransition and keyevent to move image around screen


javafx,transition,move,translate,keyevent
I am trying to make a simple tile based movement system so that when a direction is pressed a translate transition is played to smoothly move the character one tile over. The problem I am running into is that when I play the animation the image does the transition fine...

IOS: Transition with modal ViewContorller


ios,uiviewcontroller,transition,modalviewcontroller,transitions
I have custom action sheet that I create as VC. I present it with 'overCurrentContex' with the code [self presentViewContoller:myVC animated:YES completion:nil]; I need to add dark background to it. I added it with code self.view.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5]; But as I present it modally it slides from the...