When I use the Transition on a css element the things below it move. Here is an example on JSFiddle:
http://jsfiddle.net/pgdxd7su/ (Look at the JSFiddle one. The code snippet seems not to work)
h1{
font-size
}
h1:hover{
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
<!DOCTYPE html>
<body>
<h1>Hello</h1>
<hr>
</body>
Would there be a way to fix this and keep the hr from moving?
well, the easy cross-browser answer is to change your HTML markup to this:
<div id="h1box">
<h1>Hello</h1>
</div>
and then you can use your CSS like this:
#h1box {
position:relative;
height:80px;
border-bottom:1px solid #333;
}
h1 {
position:absolute;
top:5px left:5px;
}
h1:hover {
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
Basically we're getting rid of the difference between browser renderings of hr element, using more simple and easily to adapt elements like div, then removing the flow of elements by applying a position:absolute to the h1 element so the animation won't affect anything below it. Easy and cross-browser solution that will look teh same in every browser.
See fiddle here
I suppose what you need to fix is just the bad animation on hover,
perhaps this is what you want: Fiddle
your animation looks bad because you declare display: inline; inside the :hover and not in the main element itself, which will make the default display: block; from the <h1> changed to display: inline; only when it's hovered. It's jumping up and down because an inline element can't have a margin which <h1> on default, so the what you need to avoid the bad animation is either change your style to one of this
h1 {
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will keep the default block element of the <h1>
h1 {
display: inline;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will change the default block element of the <h1> to inline
h1 {
margin: 0;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
display: inline;
font-size: 3em;
}
this will change the default block element of the <h1> to inline on hover, but removing the default margin which makes it jumpy (this will result the same with the second one)
Related
Why css animation is not working in my code. When i want to hover my link.
.floridabt-nav .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
background-color: transparent;
color: #f9dd04;
transition: all 0.3s ease;
}
.floridabt-nav .dropdown-menu>li>a:focus:before, .dropdown-menu>li>a:hover:before{
content: "\2192";
color: #222222;
padding-right: 10px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
Look at the snippet. Now the transition works.
ul was missing in the selector
first css rule need of any declaration of padding
you have to put the transition declaration into the first rule (not under hover or focus)
in the second css rule you have to use padding and not padding-right
in the second css rule you don't need of transition declaration
I hope I was of any help.
.floridabt-nav .dropdown-menu>ul>li>a, .dropdown-menu>ul>li>a{
background-color: transparent;
color: #f9dd04;
-moz-transition: padding 0.3s ease-in;
-o-transition: padding 0.3s ease-in;
-webkit-transition: padding 0.3s ease-in;
transition: padding 0.3s ease-in;
padding: inherit;
}
.floridabt-nav .dropdown-menu>ul>li>a:focus, .dropdown-menu>ul>li>a:hover{
color: #222222;
padding: 10px;
}
<div class="floridabt-nav">
<div class="dropdown-menu">
<ul>
<li>
PADDING TRANSITION
</li>
</ul>
</div>
</div>
Basically I've an HTML 5 range element, which works as my app videos tracker.
Before mentioning my problem here is CSS stylesheet:
.vidskb_r::-moz-range-thumb,.vidskb_r::-webkit-slider-thumb{
height: 0px;
width: 0px;
appearance:none;
-moz-appearance:none;
-moz-transition: height .2s ease-in-out, width .2s ease-in-out;
-webkit-appearance:none;
transition: height .2s ease-in-out, width .2s ease-in-out;
-webkit-transition: height .2s ease-in-out, width .2s ease-in-out;
background-color:rgb(213,90,0);
}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:hover::-moz-range-thumb{
height:12px;
width:12px;
}
Now .vidskb_r::-moz-range-thumb,.vlrange::-moz-range-thumb, doesn't let me create my custom range thumb as long as I create a new specific class for my thumb:
.vidskb_r::-moz-range-thumb{
height: 0px;
width: 0px;
appearance:none;
-moz-appearance:none;
border-radius:50px;
background-color:rgb(213,90,0);
-moz-transition: height .2s ease-in-out, width .2s ease-in-out;
transition: height .2s ease-in-out, width .2s ease-in-out;
}
Reason: I don't know.
And Also the transition doesn't works too, when I hover over the range, it just pop up and not with animation.
Thanks in advance!
I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.
So when you rollover the individual areas the code for opacity on these classes.....
.browser .statistic,
.browser .download {
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.
Cheers,
Greg.
sorry if i missunderstanding you.
i just added:
li:hover .browser * {
opacity: 1;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}
DEMO: http://jsfiddle.net/zn09vjbv/1/
UPDATE:
is there any way to get the "h2 span" class to also change its
background position when the li is hover ?
yes, just add this: (add any attribute you like inside this class)
li:hover .browser h2 {
background: #000;
color; #FFF;
......
}
you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover
.initial-element{
opacity:1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
opacity:0;
}
I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.
The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.
Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd like is to have it disappear a lot faster when someone un-hovers or even have it disppear immediately. Is there a way to do this?
.menu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1000;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease-in;
-moz-transition: max-height 1s ease-in;
-o-transition: max-height 1s ease-in;
-ms-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
}
.menu ul li:hover ul, .menu li.over ul {
max-height: 999px;
}
I'd like to stick to CSS but I'm willing to use JavaScript.
Try this :
For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.
On hover, define a new transition duration ( the duration that the list will take to appear ).
Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm
HTML :
<div class="text">Some texte</div>
CSS :
.text{
background:blue;
transition:all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.text:hover{
background:red;
transition-duration:2s;
}
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: ...;