Example:
<div id="one">
(content)
</div>
<div id="two">
<ul>............</ul>
</div>
I want to create an effect that appears that #two is comming down from #one, I tried using transitions so when I :hover over #one so #two would appear to be coming down from #one but the content stayed there while only the background changed in size, I want the whole list to appear to be coming down from #one like in this website: http://merryweddings.com/
If you know the size of the div that will pop up, you can do a simple transition on the 'height' property, like this:
http://jsfiddle.net/BeDQr/
You also could use the transition on the 'max-height' property and set it to a very large value.
#two {
max-height: 0;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
max-height: 500px;
}
But in this case, the end of the animation might be a bit abrupt.
You might want to use JQuery for this instead of pure CSS.
Check out this example : http://labs.abeautifulsite.net/jquery-dropdown/
This link also shows a lot of possible JQuery solutions.
See this link here: How can I transition height: 0; to height: auto; using CSS?
Also see the link in the first answer of the above link which is here: Can you use CSS3 to transition from height:0 to the variable height of content?
This, unfortunately is the only solution you have for a pure CSS method. The second link shows a sort of workaround or a hack. The first gives some further details.
Related
I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!
SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important
Given a basic HTML template and CSS style, I'm seeing two different elements react completely different.
setTimeout(function() {
document.body.id = 'animate';
}, 100);
#animate input[type="checkbox"]{
width: 100px;
height: 100px;
transition: 2s all;
-moz-appearance: none;
}
#animate div{
width: 100px;
height: 100px;
background:blue;
transition: 2s all;
}
<input type="checkbox"/>
<div></div>
If you open this in a browser, you see that, on load, the div already has its 100px height/width, yet the checkbox grows from 0px to 100px height/width over 2s.
Why does the input behave differently than the div? Is it because the input has default -webkit-appearance giving it something to transition between?
The div's default width/height is auto and as such it won't animate.
The input has a default width/height and as such will animate.
As a side note, the transition does work on the div, though only animate its color, as it is possible to animate a color from transparent to blue
You should also consider to not use all with transition, as it can give unpredictalbe result because of this fact that browsers does set some values on elements to a default value, where some can be animated, some can't.
So, in your case, if your intention is to animate width/height, set it up like this: transiton: width 2s ease, height 2s ease;
The answer is simple. The input's style has a pre-loaded values in the DOM, that's why just right after appearing in the document, smoothly changes his shape.
Quite contrary with the div element. The div hasn't any pre-loaded, default values in the DOM before setting them by the user. That's why it appears in the document with already set size.
Important note
If you want the transition to work, it has to have a set, starting, default value and ending value. The animation will occur between these two values. The input has already set the default value of the size, that's why the animation will occur.
You may ask, so why the background transition is working? It works, since the default value of background is transparent.
setTimeout(function() {
$('.xx').addClass('x');
}, 500);
* {
margin: 0;
padding: 0;
border: 0;
}
input[type="checkbox"] {} div {} .x {
width: 100px;
height: 100px;
transition: all 2s ease;
background: blue;
}
.container {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<input type='checkbox'>
<div class='xx'></div>
<input class='xx' type="checkbox">
</div>
Short answer without being to technical. CSS transition's will do it's job when there is a previous state to start animate from.
A default div doesn't have any styling by default.
An input element is always pre-styled in the browser itself.
Here is a fiddle that can be used to re-create the behaviour that the OP mentioned. It simulate external loading with a simply JS delay. https://jsfiddle.net/xvt359ju/1/
Nevermind, 2 other answers was faster than me.
Browsers have their own basic CSS styling of elements, the checkbox too have it. When you inspect the element you can see width and height to the checkbox applied by the browser, that will be overridden when your external stylesheets loads. And animating it as you have given transition to it.
I am trying to make a toggle sidebar which animates.
When I try to hide the sidebar with CSS3 Transition property by adding a hidebar class, it works perfectly. But It's a toggle, and when I show it again, there is no transition. The menu just snaps out.
#page-content.hidebar {
transition: margin 0.3s ease;
margin-left: 0;
}
Can anyone suggest how can I have the transition property when I toggle the sidebar to visibility as well?
I am attaching a fiddle as an example.
http://jsfiddle.net/dxYCm/1/
You needed to do several things:
since all rules have been applied using id selectors in css, your class selector had no effect, as in css specificity it had low points to override previous rules specified under id. So you need to add !important. http://htmldog.com/guides/css/intermediate/specificity/ Learn more there...
You needed to put white-space:nowrap; as text/content of first div would curl up as div would get small.
Check it Out>>>
http://jsfiddle.net/techsin/dxYCm/5/
You don't need a hide class at all, jQuery has awesome built in features that do the same thing like .toggle() and .slideToggle!
Here's an example of .toggle
$("a#menu-trigger").click(function () {
$("#page-sidebar").toggle("fast");
$("#page-content").toggleClass("hidebar");
});
Also, you want to apply the transition to #page-content, not #page-content.hidebar so it transitions both expanding and contracting
If you do still want to do it with using a .hide class not changing the jQuery or the HTML, you can do it this way, by toggling the width and height
Relevant CSS for that:
.hide {height:0px; width:0px; color:transparent;}
#page-sidebar {width: 230px; float:left; transition: all 0.3s ease;}
So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.
What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.
I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?
Thanks all.
As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.
It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.
Hope that helps!
Here's a demo and here's the code from my example:
HTML
Box<br />Box two
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}
The simplest way for a click to trigger an animation is to add a CSS class to an object upon the click and have an CSS3 transition or animation configured for any object with that class.
Your second class to hide the item can then remove that class name from the same object.
All the details of the animation/transition would be specified in CSS3 style rules. Only the add/remove of the class name would be done with javascript.
CSS3 all by itself can trigger animations/transitions with the :hover pseudo selector, but isn't a lot more capable than that and can't trigger an animation based on a click.
I don't think this is a CSS3 vs. JavaScript question. Even if you use CSS3 for the animations, you're likely to need JavaScript to trigger the animations based on a click event.
Based on what you need to do, I see a couple of main options:
As #jfriend00 said, add or remove CSS classes which perform the animation.
Use jQuery's show, hide, fadeIn, fadeOut, and animate APIs.
What you need is some juery to spice up whatever you are developing... If am not wrong you want some thing like this: CSS3 vs Jquery
Get the jquery library and reference it in your page.
here is a snippet to jump start you.
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
You can change the effects to other available ones.
Suppose we have HTML:
<div id="wrapper">
I want this to change color when button hovered
<div class="button">Close</div>
</div>
We can change the element's style when the wrapper is hovered:
#wrapper:hover .button{
color:red
}
Now want the opposite thing:
button:hover #wrapper{
background:yellow
}
#dan; you can do this with css also like this:
#wrapper{position:relative;}
#wrapper:hover .button{
color:red;
}
.button:hover:after{
content:"";
background:yellow;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1
}
check this example http://jsfiddle.net/sandeep/b6apC/ .It's a fake but can achieve that effect with css.
While, as noted, this question cannot be answered with CSS, it can be achieved with JavaScript (and without need of a library, such as jquery, mootools etc):
var b = document.getElementsByClassName('button');
for (i = 0; i < b.length; i++) {
b[i].onmouseover = function() {
this.parentNode.style.backgroundColor = '#f90';
};
b[i].onmouseout = function() {
this.parentNode.style.backgroundColor = '#fff';
};
}
JS Fiddle demo.
Edited
You can also, with CSS3, apply fading to the backgroundColor changes:
div[id^=wrapper] {
/* other stuff */
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
}
JS Fiddle demo
If you don't mind an extra element for the text (which is most common anyway) then use the hackless and pure CSS1 solution from this answer which leads to this fiddle:
Markup:
<div id="wrapper">
<span>I want this to change color when button hovered</span>
<div class="button">Close</div>
</div>
Style sheet:
#wrapper {position: relative}
#wrapper:hover {background: yellow}
#wrapper span:hover {background: white}
#wrapper span {display: block; padding-bottom: 1em}
#wrapper .button {position: absolute; bottom: 0}
This cant be done via CSS im afraid, however via Jquery... Here is a solution! (Untested but theory is there)
<script type="text/javascript">
$(document).ready(function()
{
$(".button").hover(function()
{
$(this).closest("#wrapper").stop().animate({"color": "#fff"}, "medium");
},
function()
{
$(this).closest("#wrapper").stop().animate({"color": "#000"}, "fast");
}
);
});
</script>
Hope this helps you. The key is the "closest" bit, This searchs up the structure to find the first instance of "wrapper" and then does its jquery magic to it.
In general, CSS styles can only affect things further down the tree - so you cannot affect the wrapper (essentially ever).
However, you may be able to fake it: you probably don't care about whether the wrapping element changes color, but rather whether the visual circumscribing block changes color. This outer block does not necessarily need to be a wrapping element - indeed, there are several possible alternatives if you're willing to control the layout in more detail.
You could make the "wrapper" and "button" siblings, and then use #button:hover + #wrapper
You could have an invisible element the size of the button and include the wrapper and button within it - then declare the hover style on it.
If you only care about a background color, make the wrapper's background transparent. Then, when on button hover unhide or generate a large colored background box with a lower z-index. (You can position this new background box either handily using top, left etc. or, in case that's impossible due to other positioning, simply make it huge and with negative margins and hide overflow in the wrapper).
This last approach is particularly attractive since it doesn't require manually positioning the button. However, it's also more limited in that in doesn't really affect the surrounding box; so you can only change the background-color and not for instance the text color. I've implemented an example here: http://jsfiddle.net/emn13/xExvC/