I'm using the pseudo elements ::after and ::before for an animation on my buttons. I have reproduced this problem on 3 different platforms. It's hard to see but there's extra space on the corners. Zooming in makes it a bit easier to see.
I'm using Bootstrap but I've reproduced this with and without Bootstrap.
http://codepen.io/sinrise/pen/vLaGzN
<a href="#" class="btn btn-default btn-action">Test Button</button>
Normal
Hover
Updated
Made some more testing and research and found the real issue ... remove the z-index: 1; from the a.btn-action rule
a.btn-action {
position: relative;
overflow: hidden;
box-sizing: border-box;
color: black;
transition: color 0.4s;
transition-delay: 0.3s;
}
Updated codepen
Remove the transform3d transition for hover pseudo class and add height: 100%; for ::before and ::after pseudo selector targeting the hover animation you wanted to use.
a.btn-action {
position: relative;
box-sizing: border-box;
color: black;
transition: color 0.4s;
transition-delay: 0.3s;
}
a.btn-action::before, a.btn-action::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 0;
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
z-index: -1;
box-sizing: border-box;
}
a.btn-action:hover::before,
a.btn-action:hover::after {
height:100%;
}
Modified Demo: Codepen
Related
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%);
}
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'm having a issue with a transition css property in a button tag.
When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.
This is the code, what did I miss?
<button>Hello</button>
button {
padding: 10px;
width: 30px;
overflow:hidden;
transition: width 400ms ease-in-out;
-webkit-transition: width 400ms ease-in-out;
-moz-transition: width 400ms ease-in-out;
}
button:hover {
width: auto;
}
max-width is your friend
Demo
button {
padding: 10px;
width: auto;
max-width: 30px;
overflow:hidden;
transition: max-width 400ms ease-in-out;
-webkit-transition: max-width 400ms ease-in-out;
-moz-transition: max-width 400ms ease-in-out;
}
button:hover {
max-width: 100%;
}
Transition won't work with width: auto; you have to give a value in px, ems, percentage or whatever...
I am building a navigation that's going to fade in and out a dropdown sub menu. Because I want to build it in pure CSS, I am trying to use a transition. But whatever I do, it does not work, though it seems to be the correct way.
I define the hidden, normal version of the sub list to be display none and opacity 0, telling it to use transitions. And then, on hover of its parent it shall be display-block'd and the opacity should be transitioned.
Where's the problem here?
CSS:
#nav-main>ul>li>ul {
display: none;
opacity: 0;
position: absolute;
top: 2rem;
background-color: #fef1a3;
margin: 0;
padding: 0.25rem 0;
text-align: center;
list-style: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
display: block;
opacity: 1
}
HTML:
<nav id="nav-main">
<ul>
<li>
Link 1
<ul>
<li>
Link 1.1
</li>
</ul>
</li>
</ul>
</nav>
For your reference, here's a fiddle (don't mind the call for transitioning "all" instead of just "opacity", tried both :-) ):
https://jsfiddle.net/hzhnqx1r/
Tried it in Firefox and Safari so far. Both have the same problem.
Thanks for your help!
Transitions will not work if you toggle the display property to/from none.
(MDN: Which CSS properties are animatable)
A trick is to move it in/out of sight as well.
A simplified example (of your code)
#nav-main>ul>li>ul {
opacity: 0;
position: absolute;
top: 1rem;
left:-9999rem;
transition: opacity 0.5s linear 0s, left 0s linear 0.5s;
}
#nav-main>ul>li:hover>ul {
opacity: 1;
left:0;
transition: opacity 0.5s linear;
}
What we do here is we initially place the ul way off the screen (left:-9999rem and set it to 0 on :hover
Using a delay on the left property animation when un-hovering to allow the fadeout to be visible.
Demo at https://jsfiddle.net/hzhnqx1r/3/
Then you don't need to display: none and display: block on hover.
like this
#nav-main>ul>li>ul {
opacity: 0;
position: absolute;
top: 2rem;
background-color: #fef1a3;
margin: 0;
padding: 0.25rem 0;
text-align: center;
list-style: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
opacity: 1
}
For your knowledge opacity property value work with in 0-0.9
I also updated your fiddle reference for your better understanding
https://jsfiddle.net/hzhnqx1r/2/
I know how to do it via using an image, but it needs to be dynamically changing. Are there any tricks to using a color in place of an image? There appears to be very little documentation on using webkit masks.
I'm using this in a Chrome extension that can be used offline (i.e. I can't use PHP for this).
You can use a pseudo element with a colored background like the example at http://www.impressivewebs.com/image-tint-blend-css/
.tint {
position: relative;
float: left;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.5);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.tint:hover:before {
background: none;
}
<figure class="tint">
<img src="https://i.stack.imgur.com/e2VAF.jpg" alt="Example" width="400" height="260">
</figure>