I got a pretty annoying problem, looking at a transformation -> translate.
Currently, I am fading in my navigation "blocks" from right to the left. Now, I want a hover effect on every single one, so when you hover over it, that the block translates to the right just a little bit.
For that I used this code:
.navpoint:hover {
-webkit-transform: translate(20px, 0px);
-moz-transform: translate(20px, 0px);
-o-transform: translate(20px, 0px);
-ms-transform: translate(20px, 0px);
transform: translate(20px, 0px);
}
This should actually work, but looking at the demo, the blocks aren't even bothered to move to the right.
Here is a demo
I have the feeling that something with my set up is not right, please have a look at my HTML setup first:
<div class="navigation">
<h2 class="animated fadeInRightBig1 navpoint one">Working process</h2>
<h2 class="animated fadeInRightBig2 navpoint two">Subscribe</h2>
<h2 class="animated fadeInRightBig3 navpoint three">Contact us</h2>
</div>
Explaination: the "animated" is the general animation, custom times and delays set in each of the "fadeInRightBig's".
The "navpoint" looks like this:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
}
The "one/two/three" in my html is set as an underclass of navpointm, just like this:
.navpoint.one {
width:96.73202614379085%;
}
This is my setup, and I guess something is wrong with my Navpoint classes, but I don't know what. It would be very, very kind if you could answer this question and help me.
Thank you very much in advance.
From what I can tell, your slide-in animation is interfering with the transform you have set on :hover.
Not sure what the exact fix for that is (if there is a simple one) other than removing the animation class via Javascript (or perhaps altering the animation params a bit), but a simple way to fix this is to just change how the nav items animate on :hover.
Rather than using transform, just set a margin-left:
.nav.one:hover {
margin-left:20px;
}
You will get the same result. And it can be animated with CSS transitions.
You could try using the transitions property for this effect:
.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
.navpoint:hover {
margin-left: 20px;
}
working example can be seen here: http://codepen.io/jonwelsh/pen/sfewj
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.