I have a transition from height:0, width:0 to a certain width. It is working fine, from the bottom left to the top right. Now I thought if I change the float to 'right', the transition would go from bottom right to top left. Is there some way to make this transition?
css:
.ablauftext{
height:0;
width:0;
position:absolute;
overflow:hidden;
background-color:white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
bottom:90px;
}
.active{
height:400px;
width:400px;
}
javascript:
$('#planung').click(function(){
if(!$current.is('#planungtext')){
$($current).removeClass('active');
setTimeout(function(){$('#planungtext').addClass('active')}, 1000);
$current = $('#planungtext');
}
});
I have IDs on my elements with only the floats, so I don't think I have to add this CSS here.
It is working now, I simply had to add a the right position, like so:
.yourdiv{
right:anyamount;
}
Related
I'd like to create an animation that makes a diagonal line to grow, from width:0, to width:400px, and it starts from left ( bottom left ) to right ( top right ). I know how to do this, but with a horizontal line ( with keyframes, 0% { width:0px; } 100% { width:400px; } ), but when it comes to transform that line into a diagonal line, at the start of the animation, it also changes it's position. Any ideas? Thank you!
You can try this:
.line {
height:10px;
width:0;
margin-top:100px;
background:red;
transform:rotate(-45deg);
transform-origin:left;
animation:grow 1s linear forwards;
}
#keyframes grow{
to {width:100px;}
}
<div class="line"></div>
I'm using the next CSS rules for a div
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
The thing is that currently the behavior is that the transition direction is going from right to left.
Is there anyway to make the transition go the other way around, meaning from left to right?
Thanks for any kind of help
The transition works only for elements that are selected by the query. So if you have this html:
<div>sdlfkj</div>
And this css (WRONG):
div{
width:100px;
}
div:hover{
width:200px;
transition: width 2s;
}
The transition will work only if you hover the element. Not if you unhover the element, because there is no :unhover! If you like to have the transition while unhovering the element too, you need to put the transition to the element that will be selected in the unhovered state then.
Use this (RIGHT):
div{
width:100px;
transition: width 2s;
}
div:hover{
width:200px;
}
I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
You forgot to define the default value for left so it doesn't know how to animate.
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
Please Try this code margin-left:60px instead of left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
as #Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;
try this:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
I'm trying to get popups appearing as you hover over one of several boxes, and it's working fine except the other boxes appear over the top of my popup. I've tried applying z-index values to .original-box and .popup-box but no luck. I can't understand why z-index has no effect here?
Here's what I have:
http://jsfiddle.net/CK4tA/
<div class="original-box">
Hover over me
<div class="popup-box popup-box-centre">
Some popup content
</div>
</div>
Thanks in advance for any guidance!
EDIT: Awesome - thanks people! Just for my curiosity, why does adding z-index:0 to .original-box break it? That's what I had originally and didn't work. Thanks again :-)
add z-index to .popup-box.
.popup-box {
position:absolute;
top:0px;
width:230px;
height:230px;
padding:10px;
background-color:#EC006C;
color:#FFF;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
opacity:0;
filter:Alpha(opacity=0);
z-index: 1;
}
DEMO
Add a z-index to the box to show it on the top layer.
.popup-box{
z-index:1;
}
If you add this to the class in your css, it will work
you should put the z-index property only on the hover event. See below;
.original-box:hover .popup-box {
top:25px;
opacity:1;
filter:Alpha(opacity=100);
z-index: 20;
}
See your revised JSFiddle here. Hope this helps you my friend.
Note that the z-index is 20, you dont want conflicts with other plugins/code using z-index on other items.
i am wondering if it is possible to set the height of a div with css animation.
I have a div that when you hover over it opens up but i want it to stay that height not shrink back to the original height.
Is this possible?
it needs to be done in pure css not javascript as its a website for college
You can do something like this:-
HTML:
<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>
CSS:
.divAnimate {
border: 1px solid;
}
.divAnimate:hover {
height: 200px;
}
.setHeight {
height: 200px;
border: 1px solid;
}
Refer LIVE DEMO
You should use jQuery. CSS3 is not supported in all browsers. However, it is possible to use CSS3 to achieve this.
CSS:
#myDiv {
height:20px;/* initial height */
width:100px;
background:#aaa;
-webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
-moz-transition: height .4s linear;
-o-transition: height .4s linear;
-ms-transition: height .4s linear;
transition: height .4s linear;
}
#myDiv:hover {
height:100px; /* desired height */
}
HTML:
<div id="myDiv">
Hello World!
</div>
Hope this helps.
EDIT: Sorry, I didn't see that you needed it to stay that height. In order to do that, you would need to use something like onmouseout (or another event listener), which in the end would use Javascript anyway.
Yes, this is possible with just CSS3, but will only work in Safari/Chrome and recent versions of Opera, Mozilla Firefox, and IE10 as you need CSS3 animation keyframes to preserve the end-state of the transition.
http://jsfiddle.net/rPc88/3/