I have a header than I animate in by adding a class. My issue is that it animates going down, but not back up. Scrolling back up it disappears with no transition.
The HTML:
<header id="masthead-fixed" class="site-header">
header content here
</header>
The JS is triggered on scroll when scrolled past a certain distance.
When past a certain point:
jQuery('#masthead-fixed').addClass("stick");
When above that point:
jQuery('#masthead-fixed').removeClass("stick");
The Sass:
header#masthead-fixed {
position: fixed;
top: -73px;
opacity: 0;
-webkit-transition: opacity 1s ease, top 1s ease;
-moz-transition: opacity 1s ease, top 1s ease;
-ms-transition: opacity 1s ease, top 1s ease;
-o-transition: opacity 1s ease, top 1s ease;
transition: opacity 1s ease, top 1s ease;
&.stick {
opacity: 1;
top: 0;
}
}
Any ideas? Thanks!
So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!
The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.
Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
Okay, so if you could go to;
http://jsfiddle.net/aled2305/UzM7U/4/
you will see a blue circle, when you take your mouse over a red square will appear to the right. Now that all works how I want, but I would like the red box to stay when the user then takes their mouse over it.
Now if you take your mouse over where the red square shows, it will show because of
.down:hover
{
opacity:100;
}
So is there a way to get the red square to stay when a mouse is over it, but only when it is activated by hovering over the blue circle.
Thanks in advance
Aled
UPDATE
Sorry forgot to say I would like the red square to hide once the mouse has been taken off.
Thanks
My demo will fade-in the square upon hovering the circle. From there, when you hover over the square, it will stay opaque. After you move off the circle or square, the square will fade-out.
The trick to getting this to work is setting 2 different transitions for the opacity, height, and width properties of the square, one for hover ON and one for hover OFF, as well as adding a delay attribute to the transition. The reason for transitioning height and width is that it will prevent you from being able to hover over the square without first hovering over the circle.
Here are the default settings of the square: opacity: 0, height: 0, and width: 0.
For the hover ON transition, you want opacity to fade-in over 1 second, but to be able to see that, the height and width values need to be 40px prior to the fade-in transition. To make that happen, you need to set a delay of 0 seconds on the height and width transitions. This way, the square is immediately at its max dimensions, which allows the fade-in transition to be seen.
The hover OFF transition will revert back to the default settings. What you want to have happen is for the opacity to ease-out over 1 second while at the same time keeping the values of height and width at 40px. Otherwise, height and width would instantly revert back 0 and you would not be able to see the fade-out transition. To make that happen you need to set a delay of 1 second on the height and width transitions. In doing that, the opacity eases out over 1 second and because of the 1 second delay on height and width, at that point, height and width will revert back 0.
See the jsFiddle demo
HTML
<div id="gravatar">
<div id="circle"></div>
<div id="square"></div>
</div>
CSS
#gravatar
{
float: left;
}
#circle
{
background-color: blue;
float: left;
height: 40px;
width: 40px;
border-radius: 20px;
}
#square
{
background-color: red;
float: left;
margin-left: 10px;
height: 0;
width: 0;
opacity: 0;
/* hover OFF */
-webkit-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
-moz-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
-o-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
-ms-transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
transition: opacity 1s 0 ease-in-out, height 0s 1s ease, width 0s 1s ease;
}
#square:hover,
#circle:hover + #square
{
height: 40px;
width: 40px;
opacity: 1;
/* hover ON */
-webkit-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-moz-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-o-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-ms-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
}
EDIT
The OP left a comment stating that adding contents to the square prevents the transitions from working correctly. I corrected it by adding overflow: hidden to the square.
I also added other styles to the CSS to account for the anchors the OP added.
See the jsFiddle demo
HTML
<div id="gravatar">
<div id="circle"></div>
<div id="square">
Profile Details
Account Details
</div>
</div>
CSS
#gravatar
{
float: left;
}
#circle
{
background-color: blue;
float: left;
height: 40px;
width: 40px;
border-radius: 20px;
}
#square
{
background-color: #2D3538;
float:left;
overflow: hidden;
margin-left: 10px;
height: 0;
width: 0;
opacity: 0;
/* hover OFF */
-webkit-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
-moz-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
-o-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
-ms-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
}
#square > a
{
display: block;
font: 15px Verdana;
color: #FFF;
text-decoration: none;
height: 15px;
line-height: 15px;
margin: 10px;
}
#square > a:last-child
{
margin-top: 0;
}
#square > a:hover
{
text-decoration: underline;
}
#square:hover,
#circle:hover + #square
{
height: 60px;
width: 135px;
opacity: 1;
/* hover ON */
-webkit-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-moz-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-o-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
-ms-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
}
Here's a Fiddle Using JS that follows the following logic:
Red Box shows when hovering on Blue Circle
Red Box hides when mouse leaves Reds
You can get that effect by adding a little JQuery and modifying your CSS:
JQuery:
$(".gravatar").hover(
function () {
$(".down").addClass('hoverDown');
}
);
$(".down").mouseleave(
function () {
$(".down").removeClass('hoverDown');
}
);
Here's the CSS:
.gravatar {
background-color:blue;
float: left;
margin-top: 2px;
margin-right: 10px;
margin-left: 2px;
border-radius: 20px;
width: 40px;
height: 40px;
}
.down
{
float:left;
width: 40px;
height: 40px;
background-color:Red;
opacity:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.hoverDown
{
opacity:1;
}
well for mouse in and mouse out action you can use the mousenter mouseleave jquery function
$(".gravatar").mouseenter(
function () {
$(".down").addClass('hoverDown');
}
);
$(".gravatar").mouseleave(
function () {
$(".down").removeClass('hoverDown');
}
);
working fiddle:
http://jsfiddle.net/UzM7U/9/
Is it not possible to transition outlines with css3?
body{margin:10px;padding:0px;}
#tDiv{
background-color:#999;
width:500px;
height:500px;
color:black;
outline: 5px dashed #222;
-moz-transition: color 2s;
-o-transition: color 2s;
-webkit-transition: color 2s;
transition: color 2s;
-moz-transition: outline-color .7s ease-out;
-o-transition: outline-color .7s ease-out;
-webkit-transition: outline-color .7s ease-out;
transition: outline-color .7s ease-out;
-moz-transition: background-color .7s ease-out;
-o-transition: background-color .7s ease-out;
-webkit-transition: background-color .7s ease-out;
transition: outline-background .7s ease-out;
}
#tDiv:hover{
color:green;
background-color:gold;
outline: 5px dashed magenta;
}
http://jsfiddle.net/loren_hibbard/uKGCc/
This just changes the outline immediately..
Thanks
If you want to apply multiple different transitions, you have to coalesce them into one rule (plus repeat them with the necessary prefixes):
-webkit-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-moz-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
-o-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out;
Example: http://jsfiddle.net/UF3Ht/6/
https://developer.mozilla.org/en-US/docs/CSS/transition-property
transition:
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
When you use the same property multiple times, only the last one will be applied as usual:
transition: outline-color .7s ease-out; /* this will be overridden */
transition: background-color .7s ease-out; /* this will be used */