I am changing the width of a DIV with the following CSS:
div { width:100px; }
#media only screen and (min-width: 400px) {
div { width:300px; }
}
#media only screen and (min-width: 600px) {
div { width:500px; }
}
Is it possible to use CSS transitions to animate the change in width from 300 to 500 and from 500 to 300, without animating the change from 100 to 300 and from 300 to 100?
JSFiddle
You can just put the transition on last media query http://jsfiddle.net/T7A5v/1/
EDIT: I see what you mean, you can give this a try instead: http://jsfiddle.net/T7A5v/2/ The trick is to transition a min-width instead of the width itself.
div {
background: red;
width: 100px;
}
#media only screen and (min-width: 400px) {
div {
width: 300px;
min-width: 300px;
-webkit-transition: min-width 3s;
-moz-transition: min-width 3s;
-o-transition: min-width 3s;
transition: min-width 3s;
}
}
#media only screen and (min-width: 600px) {
div {
min-width: 500px;
-webkit-transition: min-width 3s;
-moz-transition: min-width 3s;
-o-transition: min-width 3s;
transition: min-width 3s;
}
}
Related
How do you make width and height of a circle that I made automatically reduced according to its screen size?
I set the width and height to 40px
Code:
.circle {
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #b7b7b7;
margin-right: 2%;
outline: none;
-webkit-transition: ease-in .5s;
-o-transition: ease-in .5s;
-moz-transition: ease-in .5s;
transition: ease-in .5s;
}
I tried using calc for width and height using this
width:calc(100% - 40px);
height:calc(100% - 40px);
But it doesn't seem to work. I heard some sources that calc is the key for this one. I am working with a container of 1920px and minimum screen size is 320px. Is there any proper way to implement calc function for width and height?
Thanks
You can use vw and vh (1% of available width and height respectively) partnered with media query. An example:
#media screen and (max-width: 820px) {
.circle {
width: calc(100% - 5vw);
}
}
I have already made a start and have a working fixed mobile menu with a 0.4sec ease transition decreasing the height on scroll also.
So far all done with CSS.
I tried adding a background-color transition at the bottom of the code but that bit refuses to work for me.
Currently the transition is attempting to modify .et_mobile_menu however I’ve tried making that #mobile_menu and #et-top-navigation - all no effect.
I’ve been at this for a couple of days now to no avail. Any light on how this could be done would be great, have scoured the forums already quite thoroughly.
Live Site: Intech Tools
CSS:
/** App Style header and Drop Down Menu **/
#media (max-width: 980px) {
.container.et_menu_container {
width: calc( 100% - 60px);
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}
#media all and (max-width: 980px){
/* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
/* make header fixed */
.et_header_style_left.et_fixed_nav #main-header {
position: fixed;
}
/* decrease top navigation padding-top */
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
/* transition top navigation padding-top */
.et_header_style_left #et-top-navigation {
-webkit-transition: padding-top 0.4s ease;
-o-transition: padding-top 0.4s ease;
transition: padding-top 0.4s ease;
}
/* decrease menu hamburger padding-bottom */
.et_header_style_left .et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/* transition menu hamburger padding-bottom */
.et_header_style_left .mobile_menu_bar {
-webkit-transition: padding-bottom 0.4s ease;
-o-transition: padding-bottom 0.4s ease;
transition: padding-bottom 0.4s ease;
}
}
/* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
/* Colour Transition Mobile Menu Scroll */
#media all and (max-width: 980px){
.et_header_style_left .et_fixed_header .et_mobile_menu {
background-color: #f9c13a !important;
}
/* transition menu colour */
.et_header_style_left .et_mobile_menu {
-webkit-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
}
Solved by CSS Ninja: Dwayne de Clercq
on Facebook group: Wordpress Developer & Web Designer.
The magic CSS was:
#media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
background-color:#f9c13a!important;
-webkit-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
transition:background-color 0.4s ease
}
}
Making the final complete working code for a shrinking and colour changing fixed mobile menu:
CSS
/** App Style header and Drop Down Menu **/
#media (max-width: 980px) {
.container.et_menu_container {
width: calc( 100% - 60px);
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}
#media all and (max-width: 980px){
/* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
/* make header fixed */
.et_header_style_left.et_fixed_nav #main-header {
position: fixed;
}
/* decrease top navigation padding-top */
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
/* transition top navigation padding-top */
.et_header_style_left #et-top-navigation {
-webkit-transition: padding-top 0.4s ease;
-o-transition: padding-top 0.4s ease;
transition: padding-top 0.4s ease;
}
/* decrease menu hamburger padding-bottom */
.et_header_style_left .et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/* transition menu hamburger padding-bottom */
.et_header_style_left .mobile_menu_bar {
-webkit-transition: padding-bottom 0.4s ease;
-o-transition: padding-bottom 0.4s ease;
transition: padding-bottom 0.4s ease;
}
}
/* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
/* Colour Transition Mobile Menu Scroll */
#media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
background-color:#f9c13a!important;
-webkit-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
transition:background-color 0.4s ease
}
}
I have these class, so hen I hover an item it do a transition, the problem is when I´m in mobile view, it exit of browse
.ftContainerOut {
padding-right:10px;
padding-bottom:20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor:pointer;
z-index:1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index:10;
}
I'm trying this to disable it on mobile, but it doesn´t work, only in normal view the transition gets stuck
#media screen and (min-width: 600px){
.ftContainerOut:hover {
display: none;
}
}
Help is very appreciated. Regards
First change your media query to max-width and then reset the properties that you want to reset for mobile.
#media screen and (max-width: 600px){
.ftContainerOut:hover {
transform: scale(1);
z-index:1;
}
}
Also if you want to remove transition in mobile you can also add
#media screen and (max-width: 600px){
.ftContainerOut {
transition: none;
}
}
You don't want to use display:none on the :hover, as this will make the div hide on hover, which wont work. Instead I suggest making it do nothing.
On desktop, you transform: scale the item by 1.5, so on mobile transform: scale it by 1, which as it is already 1, it will not change.
Same principle for z-index, on desktop :hover changes it to 10, so on mobile make it "change" to 1, but as it is already 1, again there is no change.
So the CSS would be:
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
Here's a snippet to try it out.
.ftContainerOut {
padding-right: 10px;
padding-bottom: 20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor: pointer;
z-index: 1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index: 10;
}
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
<div class="ftContainerOut" style="width: 100px; height: 100px; background: green;"></div>
So I made two animations for tablet using css animation and media query.
The main thing animation does is animate the div from top to center in tablet portrait and from left to center in tablet landscape.
When the page loads in portrait it animates correctly from top to center. But when the orientation is changed to landscape it starts the second animation from left to center. The same if it is in landscape first.
What I want is to animation to run only once on page load, and not trigger every time orientation changes.
Preferably without javascript, only css.
Here is a bit of code of how it works:
#keyframes leftToCenter {
from {
margin-left: -100vw;
}
to {
margin-left: 0;
}
}
#keyframes topToCenter {
from {
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
#media only screen and (orientation: portrait) {
.div {
animation-name: topToCenter;
animation-duration: 1s;
}
}
#media only screen and (orientation: landscape) {
.div {
animation-name: leftToCenter;
animation-duration: 1s;
}
}
Edit:
The animation must not be done with jQuery, it should be done only with css animation. This is the requirement.
Also, the animation is a bit more complicated, I just put the simplest version of it here.
The main thing is that it runs only on page load, and not on orientation change.
The only way that I can think of to do that in pure CSS involves the use of a single animation.
This way the browser asumes the animation has finished, and won't trigger it again.
In one orientation, we will use half of the animation, beginning at the middle, and ending at the end.
In the other orientation, we will begin also at the middle, but we will execute it in reverse and end at he beginning
#keyframes dual {
from {
margin-left: 0;
}
49.9% {
margin-left: -100vw;
margin-top: 0;
}
50% {
margin-left: 0;
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
#media only screen and (orientation: portrait) {
.element {
animation-name: dual;
animation-duration: 2s;
animation-delay: -1s;
}
}
#media only screen and (orientation: landscape) {
.element {
animation-name: dual;
animation-duration: 2s;
animation-delay: -1s;
animation-direction: reverse;
}
}
.element {
width: 100px;
height: 100px;
background-color: lightblue;
}
<div class="element"></div>
In case anyone's interested, I found another solution to this problem.
You have to move the keyframes declaration inside the media query and give them the same name. That way the right animation still gets triggered when needed, and as they have the same name animation count will increese to 1 after first animation and won't trigger again after orientation change.
#media only screen and (orientation: portrait) {
#keyframes animation{
from {
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
.div {
animation-name: animation;
animation-duration: 1s;
}
}
#media only screen and (orientation: landscape) {
#keyframes animation{
from {
margin-left: -100vw;
}
to {
margin-left: 0;
}
}
.div {
animation-name: animation;
animation-duration: 1s;
}
}
There is probably a CSS way to do it but it is very easy to create your effect using jQuery:
$(document).ready( function(){
$('#yourdiv').show().animate({top:'50%'},1000);
});
Just set #yourdiv's style this way in order to center it when position is absolute:
display: none;
position: absolute;
z-index: 100000; /* on top of all others element */
top: -50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The effect will occur only when thee page is refreshed.
You can even add an other div called shadow to make it even better looking :)
So I have this background video on my wordpress CMS, and now I want to tell it to go into hiding on smaller devices, however; it keeps showing up. What is going wrong here? Here's the code:
.header-unit {
height: 618px;
border: 0px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
-webkit-filter: blur(7px);
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
overflow: hidden;
}
#video-container:hover {
-webkit-filter: blur(0px);
-moz-opacity: 1;
opacity: 1;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
#media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
background:none;!important
}
By the way I've seen similar questions asked but the answers didn't help me :-)
And here's the HTML :
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src=".../uploads/2015/03/test.mp4" type="video/mp4"/>
</video>
</div><!-- end video-container -->
</div><!-- end .header-unit -->
Your media queries are targeting .video-container class not #video-container id and your video is a html element not a background element
Change
#media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
background:none;!important
}
to
#media only screen and (max-width: 479px) and (min-width: 0px)
#video-container {
display:none;!important
}
Try using #video-container instead of .video-container in your media query.