I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
Related
I have a simple code with CSS transition and image hover effect.
Codepen Demo
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease;
visibility:hidden;
overflow:hidden;
Could you please explain to me:
Why this part causes left to right animation? (apparently "all" property)
transition: all 0.2s ease;
How can I change it to make a simple fade instead of left/right move? Do I have to use jQuery for it?
Thanks
Kris
Change your CSS to the following:
.item .overlay {
position: absolute;
left: 0%;
top:0;
width: 0%;
height: 100%;
opacity:0;
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
overflow:hidden;
}
And on hover
.item:hover .overlay {
top: 0;
left: 0;
visibility: visible;
width: 100%;
height: 100%;
opacity: 1;
}
Updated codepen demo
the left to right is because the position of
.item:hover .overlay and .item .overlay are both 'left: 0;' if you change both to 'right: 0;' you get the animation from right to left
no Jquery is required for a fade effect, you could just add two css properties (opacity) opacity 0 on the .item .overlay and opacity 1 on the .item:hover .overlay
I am adding a class to an hr element that grows when it has this class. It is working nicely in chrome but not on firefox. I have inspected and it is adding the class so the css is not working.
Any ideas?
hr.portfolio-line {
width: 0px;
background-color: #fff;
border: none;
height: 2px;
z-index: 8;
position: relative;
}
hr.portfolio-line.grow {
-webkit-transition: width 1s ease-out;
-moz-transition: width 1s ease-out;
-o-transition: width 1s ease-out;
transition: width 1s ease-out;
width: 100px;
}
Am trying to define css style in which when hover an element the opacity should change from 0 to 1.after a few seconds if unhover doesnt occur opacity should change its value to 0.
.selection:hover .player-icon {
opacity: 1;
transition-duration: 3s;
-moz-transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;*/
}
.player-icon {
margin-left: 45%;
margin-top: 21%;
z-index: 999;
position: absolute;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
Use keyframe animation.
#keyframes show-hide {
0% { color: red; }
10% { color: white; }
90% { color: white;}
100% { color: red; }
}
.player-icon {
display: inline-block;
padding: 1em;
color: red;
background-color: red;
}
.player-icon:hover {
animation: show-hide 3s linear;
}
Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/
I am trying to figure out why the fade in and out of a dialog box in this code is not working properly.
What I'm trying to do is having a fade in and out on click. But I am trying to do this fade in/out with CSS only though.
When i remove manually the class "active" in the console the effect works, but not when I actually click on the link (to open the dialog box).
This is my code
CSS:
.modal {
display: block;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
-webkit-overflow-scrolling: touch;
outline: 0;
background-image: url('pixel.png');
opacity: 1;
}
.modal-dialog {
max-width: 600px;
background-color: white;
z-index: 99;
min-height: 200px;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.modal-dialog .active {
opacity: 1;
background-color: #ffffff;
border: 1px solid #999;
-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;
transition: all 0.5s ease;
}
My JS (just in case):
$('body').on('click', '[data-modal]', function (e) {
e.preventDefault();
$('body').addClass('modal-open');
$('body').append("<div class='modal'></div>").addClass('active');
$('.modal').append("<div class='modal-dialog'></div>")
$('.modal-dialog').html("<div class='modal-inner generic-content'></div>").addClass('active');
Transition needs numeric value in order to set steps in between 2 rules statement.
You should use : opacity instead display:
http://jsfiddle.net/bJz7R/1/
$('a.click-me').click(function(){
$('#open').css('opacity','1');
});
and replace in CSS:
display:none;
by
opacity:0;