Heres a visual: http://cl.ly/image/2L3g1d0W1r1Y
The text fades fine, but the image on the left is instant and doesn't fade ad the same time as the text. How do I get them to fade in at the same time for all browsers? It seems to work fine in chrome, but not in Firefox or Safari.
I'm a little confused by whats going on, but heres my html:
<ul class="action">
<li><a class="visit-site" href="http://google.com">Visit Site</a></li>
<li><a class="back-to-top" href="#portfolio">Back to top</a></li>
</ul>
and here is the css:
ul.action a.visit-site {
background: transparent url('../images/arrow-small-right-rest.png') no-repeat 0 2px;
padding-left: 18px;
color: #57585a;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
-o-transition-duration: 0.5s all ease;
}
ul.action a.visit-site:hover {
background: transparent url('../images/arrow-small-right-over.png') no-repeat 0 2px;
color: #3ee1df;
}
With Sprite:
ul.action a.back-to-top{
background: transparent url('../images/sprite.png') no-repeat 0 2px;
padding-left: 18px;
width: 13px;
height: 13px;
color: #57585a;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
ul.action a.back-to-top:hover{
background-position: 0 -63px;
color: #3ee1df;
}
If your using something like jQuery with your overall design and development you can "animate" the "opacity" of the whole UL element you have, which should create the transition you want.
But opacity isn't supported in all browsers more so the older ones. There are cross browser solutions to it, but in all you want to adjust the opacity to create the transparency effect
Related
HTML:
<a class="navbar-brand page-scroll" href="#intro"></a>
CSS:
.navbar-custom .nav li a.navbar-brand {
width: 70px;
height: 62px;
background: url(myimg.png) no-repeat;
background-size: 70px 62px;
display: block;
position: relative;
text-indent: -9999px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
.navbar-custom .nav li a.navbar-brand:hover {
background: url(myimghover.png) no-repeat;
}
The hover effect works fine in every browser, but the transition effect works in Google Chrome only and I really can't explain why. I've already tried using sprite images and pseudo-element hover, but my images have a transparent background so, on hover, the "bottom" image remains partially visible. Any idea?
Thank you in advance.
Regards,
J.
try
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
You can't animate background-image. https://www.w3.org/TR/css3-transitions/#animatable-properties
i'm developing a website, and i have a bug as seen in this fiddle.
My footer, on hover, should go up, and on "mouse-out" should go back to his place, but if i go out, and place the mouse where it went after going up, the footer automatically goes up without the smooth effect ...
I can't explain this in other easier way, so if someone understands and knows how to help, i really appreciate!
Here is the same code:
html, body{
height: 100%;
}
.x{
width:100%;
min-height: 100%;
background-color: #000;
color: #FFF;
}
.y{
background-color: #ABC;
width: 100%;
text-align: left;
position: fixed;
bottom:-50px;
height: 100px;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-ms-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
.y:hover{
-webkit-transition: ease;
-moz-transition: ease;
-ms-transition: ease;
-o-transition: ease;
transition: ease;
-webkit-transform: translate(0px,-100px);
-moz-transform: translate(0px,-100px);
-ms-transform: translate(0px,-100px);
-o-transform: translate(0px,-100px);
transform: translate(0px,-100px);
}
<body>
<div class="x"> x
</div>
<div class="y"> y
</div>
</body>
You need to add a timing value for the transition on hover
transition: 0.5s ease;
See updated fiddle;
"Solution" Edit: I ended up just changing the layout a bit to get around this issue, as shown below. The original problematic behavior was present in other browsers as well, so I simply kept the button in place instead of sliding it to the left upon opening the search box.
--------- Original Question ---------
I wasn't sure how to word my title, but let me explain my issue. Using pure CSS and HTML, I'm making an expanding search box. The problem I have is when closing the search box, if you don't move your mouse, the button will still be shown as hovered, even though it has moved. Here is my problem:
What can I do to prevent this, if possible? It just messes with the look of the animation even if you move off of it when you click. The animation is smoother than shown. Using latest Chrome on W7.
CSS:
div#nav-search {
display: inline-block;
height: 34px;
float: right;
font-size: 0;
width: 60px;
position: absolute;
top: 43px;
right: 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav#header-nav.small div#nav-search {
top: 18px;
}
div#nav-search.open {
background-color: #FFBC43;
width: 95%;
}
div#nav-search-wrapper {
display: inline-block;
vertical-align: top;
height: 34px;
width: calc(100% - 60px);
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn {
display: inline-block;
height: 34px;
width: 60px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn span {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-o-transform: skew(45deg);
display: block;
width: 100%;
height: 100%;
background-image: url({{ 'search-gold.png' | asset_url }});
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
button#nav-search-btn:hover {
background-color: #FFBC43;
}
button#nav-search-btn:hover > span, div#nav-search.open > button#nav-search-btn span {
background-image: url({{ 'search-brown.png' | asset_url }});
}
HTML:
<div class="nav-right transition">
<span class="phone-number">{{ settings.company_phone }}</span>
<div id="nav-search">
<button id="nav-search-btn"><span></span></button>
<div id="nav-search-wrapper">Wrapper filler text</div>
</div>
</div>
I am trying to get it so that when you hover over the box the '^' will animate upwards. Currently it gets to the right position on the over state but it does not apply the css transistion.
jsFiddle: http://jsfiddle.net/9f9fyaj2/
HTML:
<a href="#">
<div class="scrollToTop">
<i>^</i>
</div>
</a>
CSS:
body{
background: #7A7A7A;
}
.scrollToTop{
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .02s ease-out;
-moz-transition: top .02s ease-out;
-ms-transition: top .02s ease-out;
-o-transition: top .02s ease-out;
transition: top .02s ease-out;
}
.scrollToTop:hover i{
top:-20px;
}
.scrollToTop:hover{
background: rgba(0,0,0,1);
}
your transition is working well and good.
Just increase the time given for the transition.
Like This:
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .5s ease-out;
-moz-transition: top .5s ease-out;
-ms-transition: top .5s ease-out;
-o-transition: top .5s ease-out;
transition: top .5s ease-out;
}
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: ...;