I have the following CSS to control three a tags which should have vertically central text, however they appear at the top of the button. It's easier to see result.
CSS Code:
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
padding: 5px 0;
-webkit-transition: background 500ms ease-in-out;
background: #242424;
font-size: 1.7em;
display: block;
margin: 0 15px;
In chrome:
In IE:
Any ideas?
you have to use both the height and line-height property to achieve the same effect in IE.
Check the DEMO.
Please use line-height, as per your height of the button. I hope it will work
Related
I have added transition to my buttons and it works fine
I have a div with width/height defined inline via props (react), the transition code looks very similar to the button so I'm unsure why it isn't wokring. For this example I just want a simple transition from a white background to red when you hover.
I have set the background color to white initially and :hover to red:
background-color: red;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
However this results in the expected result.. without any transition
I have tried changing the width on hover and setting tranisition: all 1s but it works without any transition again.. Why is this happening?
Thanks
Thanks for the fast responses. My apologies for the missing details. Turns out it was because the AOS (animation on scroll) library causes issues if doing transitions on the same element. I solved this by wrapping the div in another div.
It would help if you showed more of what you have on the hover, but I'm assuming that maybe you have the code set something like this:
.box{
background-color: red;
}
.box:hover{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
It should be like this:
.box{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
Usually, the transition is given to the element.
Try this instead -
Css
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
}
div:hover {
background-color: red;
}
Sass -
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
&:hover {
background-color: red;
}
}
Try this, if set initially white to div background. Default it is white.
so, we can add transition , then hover the background change to red
CSS
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
SCSS
.box{
transition: background-color 0.5s;
&:hover{
background-color: red;
}
}
Try this snippet.
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
<div class="box" style="width:100vh;height:100vh;"></div>
I have a simple CSS transition for when you hover over a button it eases into the box-shadow. But for some reason, the transition doesn't work on my site. I have other CSS transitions on my site that work just fine but this one is being difficult. Is there anything that could potentially block a transition? The :hover is instant opposed to using an eased in effect like I was aiming for.
I'm using Sass but I am not sure if that makes a difference:
.btn.btn-more {
background: none;
border: 1px solid #dadada;
color: #555;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
min-width: 130px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
vertical-align: middle;
&:hover {
box-shadow: 0 1px 4px #999;
}
}
This site is using Bootstrap 2.3.2 which is where that .btn comes from. I have tried this in Chrome and Safari.
.btn is overriding the transitions and Chrome dev tools wasn't showing that override until I opened the page in a new tab and opened dev tools again.
So I've made a responsive navbar in pure CSS and every transition is working when my checkbox is :checked but not the color of the box-shadow of my label that I use as a hamburger button for my checkbox.
I wonder why, can you help me ? I've made a fiddle of my code : the last property in the end of the CSS is the one not working
http://jsfiddle.net/zakL5e8b/1/
#show-menu:checked + .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}
Also, the text of my navbar's opacity is animated when my navbar expands but not when it collapses :s here is the propertis not working
#navbar-nav {
visibility: hidden;
opacity: 0;
overflow: hidden;
position: relative;
list-style-type: none;
transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
#show-menu:checked + #navbar #navbar-nav {
visibility: visible;
opacity: 1;
transition: opacity .2s ease-in-out .2s;
-webkit-transition: opacity .2s ease-in-out .2s;
}
It's the first time that I trigger events only in CSS via checkboxes :) Thanks in advance !
The problem was in my html and not in my CSS
I had to include the button into the navbar at the end AND precise in my CSS
#show-menu:checked + **#navbar** .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}
It resolved all my problems, also i've edited the fiddle
http://jsfiddle.net/zakL5e8b/2/
From my understanding of CSS3 transitions you have to specify the transition only in the base element and not in the :hover element, e.g. as described in the Mozilla documentation. This should lead to a transition when the new properties from :hover are applied and reverse the transition as soon as you don't hover anymore. (Fiddle below code)
#test{
position:absolute;
height: 100px;
width: 100px;
background-color: #A8A8A8;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#test:hover{
border-bottom: 10px solid black;
}
But this leads to fading-in only. When you stop hovering the border is instantly removed.
http://jsfiddle.net/hcsamkjf/1/
Any ideas?
You also need to specify the "initial state", otherwise the browser doesn't know what to animate. It can sometimes guess, which would be why you see it half-working (but it doesn't transition at all for me).
Add border-bottom:10px solid transparent or border-bottom:0 solid transparent to your #test styles, depending on the exact effect you want.
The issue is that as you are not specifying a border-style in the initial state, when you "unhover", the animation changes from solid to the default value : none. Border-style isn't animatable so the change is sudden.
You need to specify the same border-style in the initial state (note: specify a 0 border-width too to remove default border width) so the animation only affects border-width and stays smooth in both directions.
DEMO
CSS :
#test{
position:absolute;
height: 100px;
width: 100px;
background-color: #A8A8A8;
border-style: solid;
border-width:0px;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#test:hover{
border-bottom: 10px solid black;
}
I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome.
The opacity shows but is instant.
To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
Ben
CSS:
.XMABAN {
height: 153px;
width: 230px;
background-color:rgb(127,0,25);
padding: 0;
vertical-align: top;
}
.XMABAN a {
height: 153px;
width: 230px;
text-decoration:none;
}
.XMABAN a:hover {
text-decoration:none;
}
.XMABAN img {
opacity: 1;
transition: opacity 0.70s ease-in-out;
-moz-transition: opacity 0.70s ease-in-out;
-webkit-transition: opacity 0.70s ease-in-out;
-o-transition: opacity 0.70s ease-in-out;
}
.XMABAN a:hover img {
opacity: 0.30;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
}
.XMABAN span {
position: relative;
left: 0%;
top: -62%;
font-weight:bold;
font-size:20pt;
color:#404040;
transition: color 0.70s ease-in-out;
-moz-transition: color 0.70s ease-in-out;
-webkit-transition: color 0.70s ease-in-out;
-o-transition: color 0.70s ease-in-out;
}
.XMABAN a:hover span {
color:#FFF0F5;
transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
}
HTML:
<tr>
<td style="width: 33%;">
<div class="XMABAN" style="margin: 10px 0px 5px 0px;">
<a class="DSPI" href="online.asp">
<img src="../images/PRM_220.jpg">
<span>TEXT</span>
</a>
</div>
</td>
</tr>
CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.
I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:
It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:
-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;