Follow up on this topic
When I apply css transform to parent element, child element is not fixed anymore.
http://jsfiddle.net/z8fBD/7/
have tried using only one direction transform but no success.
when you remove transform: translate(0%,0px); everything works just fine, but as you will understand from previous topic, I need this for my animation
Do you mean the move 'button' should stay put? If so, you need to apply the transform to the container element since the body (you should consider renaming this div) will transform all its children. Here are the changes to do that:
JS:
jQuery(document).ready(function($){
$('#move').click(function(){
if(!$('#container').hasClass('move')){
$('#container').addClass('move');
} else {
$('#container').removeClass('move');
}
})
})
CSS:
#body {
position:absolute;
left: 0;
top:0;
width: 200px;
}
#container {
-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;
-webkit-transform: translate(0%,0px);
-moz-transform: translate(0%,0px);
-ms-transform: translate(0%,0px);
-o-transform: translate(0%,0px);
transform: translate(0%,0px);
}
#container.move {
-webkit-transform: translate(150%,0px);
-moz-transform: translate(150%,0px);
-ms-transform: translate(150%,0px);
-o-transform: translate(150%,0px);
transform: translate(150%,0px);
The rest of the CSS stays the same. Note how styles that were on the body were moved to #container.
Related
i have this code and the image goes up with with the transition but I would like to came back with the transition down when my mouse goes somewhere else
my actually code;
.yt:hover {
transform: translateY(-30px);
transition-duration: 2s;
}
.yt {
transition: 2s;
}
.yt:hover {
transform: translateY(-30px);
}
Move the transition attribute to the whole object
img{
transition: all 2s;
}
img:hover {
transform: translateY(-30px);
}
<img src="some_src.jpg" />
The problem I have is that when I set a:
.banner-division2 h2:hover {
-webkit-transition: 0.6 ease;
transition: 1s ease;
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
It will only transition for the first part of the hover. In other words, once the mouse has exited the "hover" area, it will automatically go back to it's original form - however, I want it to transition ease back into it's original form (it isn't doing this).
Many thanks.
You need to put the transition property on the element you want the effect, not on the :hover.
Like this
h2 {
color: blue;
transition: 1s ease;
}
h2:hover {
color: red;
}
If this not work , try to add the value all on the transition property
You have defined the transition for the :hover state only. When not in :hover, no transition is defined - and ofc, none does happen. So split your rule:
.banner-division2 h2 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.banner-division2 h2:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
This way, the transition targets your h2, not only your h2:hover.
I'm working on making a sidebar on My main page something like google ventures (https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.
here is my jquery code for adding classes for collapse/expand the side bar
$('[data-toggle="offcanvas"]').mouseenter(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
$("body").addClass('sidebar-open')
}
});
$('[data-toggle="offcanvas"]').mouseleave(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open');
$("body").addClass('sidebar-collapse')
};
});
and here are css classes (with media queries) for this
.main-sidebar,
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
#media (max-width: 767px) {
.main-sidebar,
.left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.sidebar {
padding-bottom: 10px;
}
and here is html code where my sidebar resides
<aside class="main-sidebar" data-toggle="offcanvas">
<section class="sidebar">
<ul class="sidebar-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</section>
<aside>
I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks
You can put the text in an element like, say p's. Then you can you try hiding the them when mouse leaves and show them when mouse enters. You can add the lines similar to the below ones in your jquery.
// on mouse leave
$('ul.sidebar-menu li>p').hide();
// on mouse enter
$('ul.sidebar-menu li>p').show();
Edit ---
Alternatively you can try the below CSS for aside.main-sidebar,
white-space: nowrap;
overflow: hidden;
This happens in Safari 6 on Mountain Lion and in the latest chrome. (Confirmed on OSX, might not happen in windows)
Please see this page for an example:
http://users.telenet.be/prullen/flicker2.html
Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing.
The associated CSS is below. I cannot make any changes to the .out and .in classes. Only to the item class.
I have tried adding -webkit-backface-visibility:hidden; as I read somewhere that that should fix it, but it hasn't made any difference.
Does anyone have a clue?
Thanks,
Wesley
.out {
position: relative;
display: block;
margin: 0;
border: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.in {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.item {
margin: 60px;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
}
.item:hover {
-webkit-transform: scale(1.3) !important;
-moz-transform: scale(1.3) !important;
-o-transform: scale(1.3) !important;
-ms-transform: scale(1.3) !important;
transform: scale(1.3) !important;
}
I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.
Actually, adding
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
to the affected elements does solve the problem.
You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.
Note: This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.
I have the same problem, but fix it.
Just add the .no-flickr class to any blinking or flickering element in your project
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I've had the same problem this morning and found that the best fix was:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
I added this to each of the two elements that make up the faces of the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.
When I click a button, I wanna do some things listed below using HTML5 and CSS3. But I don't know how can I achieve these things at the same time.
When I click a button:
Change element A's CSS3 property -webkit-transform to rotateY(180deg) in 1 second (using -webkit-transition:-webkit-transform 1s;)
Change element A's CSS3 property -webkit-transform to scale(0.8) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;). Then change element A's CSS3 property -webkit-transform back to scale(1) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;).
Are there any solutions about this issue?
Thank you!
You'd have to use animation rather than transitions:
#-webkit-keyframes myAnimation{
from {
-webkit-transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(90deg) scale(0.8);
}
to {
-webkit-transform: rotate(180deg) scale(1);
}
}
div {
-webkit-animation-duration: 1s;
}
div:hover {
-webkit-animation-name: myAnimation;
-webkit-transform: rotate(180deg) scale(1);
}
Here's a demo.