Two days ago I asked for help with animation css3.
Here is my animation: [link]http://jsfiddle.net/SD58Z/8/[/link]
Everything works fine, but I have another question. It is possible to set width of this line automatically, that this line fit properly regardless of the length of link text? The point is this line is too short when my title is longer.
I just created a mod and line shows correctly but my animation disappeared.
[link]http://jsfiddle.net/DashDesign/SD58Z/284/[/link]
I'm not exactly sure what you are trying to do, but this makes the underline span to 500px.
.line{
font-family:Tahoma;
width:0px;
position: absolute;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */
}
div:hover{
width:500px;
}
.line div{
background:#fff;
position:relative;
bottom:1px;
}
}
2 changes were the width on hover and your fiddle was missing a closing brace at the end
Related
I'm using transitions to move text when their parent element is hovered. However, the transition is not reversed when testing in Safari. This results in the text quickly jumping back to the beginning if you stop hovering the parent element before the transition has finished. If you do this in Chrome, the transition reverses back to the beginning.
Can this be fixed in Safari in some way?
GIF showing Safari & Chrome comparison
Safari not reversing clearification
Overview of CSS:
.infoContainer {
display: inline-block;
position: absolute;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
bottom: 1rem;
}
.body:hover .infoContainer {
bottom: calc(100% - 1.8rem - 1.3rem - 1rem);
}
Running Safari Version 16.1 (18614.2.9.1.12), Chrome Version 108.0.5359.98.
Expectations and attempts:
I was expecting the transition to be smoothly reversed like it is in Google Chrome. I've tried using the following CSS without success.
-webkit-transition: bottom .5s ease-in-out;
I can't comment so I will write my answer here.
You can add this
.infoContainer {
display: inline-block;
position: absolute;
bottom: 1rem;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
transition-delay: 1ms;
-moz-transition-delay: 1ms;
-webkit-transition-delay: 1ms;
-o-transition-delay: 1ms;
}
It should help on safari ;)
I've just noticed that some CSS3 transitions have stopped working in Chrome (was working when I checked a few weeks ago) - seems fine in Safari.
I've definitely used this code before but maybe i'm overlooking something this time around?
The aim is just to have a smooth transition on hover:
Demo
HTML
<div></div>
CSS
div{
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div:hover{
right:-10px;
position:relative;
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
Thanks for any advice
right doesn't work on static positioned element, you need to use position: relative; on load as well as you need to define right and set it to 0 or whatever you like.
Demo
div{
/* All the properties you have declared will go here plus === */
right:0; /* Add this */
position:relative; /* Add this */
}
Using position: relative; on load will help you transit your element on mouse out as well as on mouse over, so if you are setting position: relative; on :hover then your element will fail to transit on mouse out.
Also, I've noticed that you are not using any standard property for transition so make sure you use them.
moving image after hover
with chrome only!
see my page in google chrome browser: http://qass.im/teeny/
now hover all images..
Why moving image after hover?
.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pin img:hover{
opacity:1;
}
thanks.
Because of differ in image resizing algorithms (btw on my machine image center is "moved" in firefox), but not in chrome) - try to use an image of exact size you use in column 258x181px - in that case it wouldn't be resized by a browser and an effect of moving will dissappear.
Please test the following fiddle in Safari or Chrome as well as Firefox. You will notice that the animation is smooth in Safari, even after the mouse is no longer hovering over the div (when the div has moved past the mouse). In Firefox, however, once the div moves to where the mouse is no longer touching, it begins to move back to its original position, thus causing an unsightly shake. Can I use JavaScript to resolve this issue?
jsFiddle
#object01 {
position:relative;
margin-top:10em;
width:300px;
height:300px;
background-color:red;
border:2px solid black;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index:1000;
transition:all 1s ease;
-webkit-transition:all 1s ease;
-ms-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
top:0;
}
#object01:hover {
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotatate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
top:-250px;
}
To avoid need to change the markup, you can add a pseudo-element and animate in in the opposite direction, so it will 'hold the active area' when the main element is moved:
#object01:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
#object01:hover:after {
-webkit-transform: translateY(250px);
-moz-transform: translateY(250px);
-o-transform: translateY(250px);
-ms-transform: translateY(250px));
transform: translateY(250px);
}
(fiddle)
Also, there are several observations that animation has better performance and goes smoother if animating transform: translate(...) than if animating top/left: 1, 2. And it's better if the unprefixed property goes after the prefixed ones (because if the browser supports both prefixed and unprefixed syntax, there are more chances for the prefixed implementation to be buggy than for the unprefixed one). And there is no need to specify -ms-transition since IE9 doesn't understand it, and all shipped versions of IE10 support the unprefixed syntax.
The problem is that the accordion has a 300px height which is being left as white space below the accordion itself when the slides are closed. This causes spacing issues, since anything below it has to come after this ease-out space.
After looking at my old CSS Accordion, it seems to be because the slide itself is set with a 300px height and in the old accordion it was only ~40px, then opened a ~200px slide after being clicked. (Though this jerked the screen around.) I'd like to avoid HTML5 if possible and only use javascript if there's no other choice.
Is there a quick/easy way to hide this space, or am I looking at finding another accordion again?
Here's a quick JSFiddle I made to show the problem http://jsfiddle.net/RahpC/4/
Old Accordion:
.vertical section{ width:100%; height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }
New Accordion:
#vertical{
width:700px;
height:300px;
}
The thing with the old accordion style is I think I'd have to change to using "#" to make the targets and I'm not sure how much I'd have to rewrite if that's the only solution.
The other solution is to remove the images I'm using in the slides and then reduce the overall size of the accordion, but that sort of defeats the point of what I'm doing.
Thanks for any help in advance :)
If it is NOT imperitive that you use percentage values for the height's of the accordion elements, then this is a simple solution: http://jsfiddle.net/RahpC/18/
I changed...
#vertical{
width:700px;
height:auto; /* changed to auto from 300px */
}
#vertical li{
height:50px; /* changed from 14% to 50px */
width:100%;
-moz-transition:height 0.2s ease-out;
-webkit-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
#vertical li:hover{
height:200px; /* was 60% changed to 200px, can be made as high as you need */
width:100%;
}
Nice thing here is you can add as many slides as you want and it will always work because height is defined specifically.