I have the following CSS:
.foo
{
height:100px;
overflow:hidden;
-webkit-transition: height 200ms;
-moz-transition: height 200ms;
-o-transition: height 200ms;
transition: height 200ms;
}
.foo.open
{
height:auto;
}
When .foo has an auto height, it will be a height of ~550px depending on the content.
I add the class open using jQuery, and I would expect to see the height change from 100px to ~550px in 200ms using CSS3 transitions.
However what exactly happens is that the height changes from 100px to 0px, then jumps to ~550px.
-- See Live Demo --
If I instead change .open to height:550px then this works fine, however the content length will vary and therefore I need to set the height to auto, and not a fixed pixel height.
Why is the div closing instead of sliding to ~550px, and how can I resolve this animation issue?
I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.
Here's a demo to show you what I mean.
Code from demo:
.foo
{
max-height:100px;
overflow:hidden;
-webkit-transition: max-height 200ms;
-moz-transition: max-height 200ms;
-o-transition: max-height 200ms;
transition: max-height 200ms;
}
.foo.open
{
max-height:1000px;
}
It's not an elegant solution, but I hope it helps.
This isn't the most elegant solution, but it gets around the auto height issue.
On click of the button, calculate the height the div will be with auto height by doing:
var openHeight = $foo.addClass("heightauto").height();
Then remove this class straight afterwards, and apply a height to the div of openHeight:
$foo.removeClass("heightauto");
$foo.height(openHeight);
The heightauto class also needs to override the CSS3 transitions so that the height is changed instantly:
.foo.heightauto
{
height:auto;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
See Live Demo: http://jsfiddle.net/AbPEx/4/
This is still hacky though, so if there is a more elegant solution then I'm open to suggestions
It is not possible to use transitions with height:auto.
The trick with max-height is a pretty good solution but has some inconvenience, especially a weird delay if max-height is much higher than the real height.
Here is the trick I use : http://jsfiddle.net/g56jwux4/2/
Basically it is two imbricated DIVs translating in opposite directions. Take a look a the code at jsfiddle because my english is not good enough to explain it clearly.
HTML part:
<body>
<p>Technicaly this dropdown menu looks like a simple height transition.</p>
<p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
<input type="checkbox" id="menuOpen"></input>
<label id="bouton" for="menuOpen"><span>Click on me !</span>
<div id="menu">
<div id="masque">
<div class="choix" id="choix1">Choix 1</div>
<div class="choix" id="choix2">Choix 2</div>
<div class="choix" id="choix3">Choix 3 très très long pour voir la taille finale du menu</div>
<div class="choix" id="choix4">Choix 4</div>
<div class="choix" id="choix5">Choix 5</div>
<div class="choix" id="choix6">Choix 6</div>
</div>
</div>
</label>
</body>
CSS Part :
body {
font-family: sans-serif;
}
#menuOpen {
display: none;
}
#bouton {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 30px;
background-color: lightgray;
cursor: pointer;
}
#bouton > span {
color: black;
padding: 6px;
line-height: 30px;
}
#menu {
position: absolute;
top: 100%;
overflow: hidden;
min-width: 100%;
transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
transform: translateY(-100%);
visibility: hidden;
color: white;
}
#menuOpen:checked + #bouton > #menu {
transform: translateY(0%);
visibility: visible;
transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
transform: translateY(0%);
}
#masque {
position: relative;
background-color: gray;
transform: translateY(100%);
transition: transform 0.3s linear 0s;
}
.choix {
white-space: nowrap;
padding: 3px 6px;
}
.choix:hover {
background-color: darkgray;
}
There is a small bug in there, I already fix it. by adding min-height: 100px;
.foo {
min-height: 100px;
height: 100px;
...
}
There you won't see it go back to 0px.
Related
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
How can I realize a smooth transition for my mobile menu?
The transform property is working, but I want it to happen slowly..
My Sass looks like this
.mobile-nav
display: none
position: relative
width: 100%
background: $white
padding: 30px 0 20px
transform: translateY(-100%)
#media (max-width: 775px)
.mobile-nav.is-o
display: block
transform: translateY(0%)
The main obstacle you're facing is that the display property is not animatable.
Like a light switch, display: none is off and display: block is on. There's no middle ground, no fade effects, no CSS transitions.
However, there are multiple other properties you can use for transitions. Among them:
height
opacity
z-index
background-color
Here's an example:
.mobile-nav-toggle {
font-size: 2em;
cursor: pointer;
}
.mobile-nav {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
opacity: 0;
transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
width: 150px;
height: 150px;
opacity: 1;
background-color: lightgreen;
transition: 1s;
}
<div class="mobile-nav-toggle">☰</div>
<div class="mobile-nav">
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
References:
Full list of animatable properties in CSS
Transitions on the display: property
I personally use opacity combined with visibility to achieve fade effect like I would like for whole element. Remember to manipulate z-index, so you "hidden" object won't be clickable when dissapeared.
I'm using css3, an image that when you hover over it will slides up like this
I find this example,but I want not the box's background property.
<div class="box">
<img src=image/image.jpg>
</div>
Image source is from html,not css background property
I'm just wondering if anyone can point me to a good tutorial or can help me with it?
Well I've come up with a quick example how you could do it, you can play around change values and improve it. I hope it helps.
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{
width:200px;
float:left;
}
.box:hover img{
margin-top:-200px;
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
transition: margin 1s;
}
Example:
https://jsfiddle.net/pqrnt921/1/
A pure CSS3 slide up transition effect works better if you move the transition properties to the normal state, like this:
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{ /* Normal state */
width:200px;
float:left;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.box:hover img{
margin-top:-200px;
}
This way, on roll Out you'll get a nice transition to the original position.
If you want this to be more universal so you don't have to worry about what image you are using (I mean, you don't have to worry about image width), I propose using background-image, background-position and background-size.
Here is JSfiddle example.
Based on Joe's answer so, thanks Joe :).
For top-to-bottom sliding, you can simply use the following code.
div {
width: 400px;
height: 200px;
background-image: url('https://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fisolpro.in');
background-size: cover;
background-position: top;
transition: all 2s;
}
div:hover {
background-position: bottom;
}
<div>
</div>
BTW, I have used https://snapito.com/ to take fullpage screenshot of my website.
So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.
Today i wanted to create something like this:
Text moving from left to right
I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.
I stumbled upon some CSS Animations and tried this
#keyframes floatText{
from {
left: 0;
}
to {
right: 0;
}
}
on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.
Thanks in advance!
EDIT:
To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations:
Animated
As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!
Thanks again!
EDIT2:
Is there a way to accomplish something like this?
#keyframes floatText{
from {
left: 0px;
}
to {
left: (-this.width+parent.width)px;
}
}
This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(
You can stop when your text hits the right border
This solution uses CSS translate.
The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.
Make sure your text's display property is NOT inline.
Downsides of this CSS only approach:
Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.
.animated {
overflow: hidden;
width: 11rem;
white-space: nowrap;
}
.animated > * {
display: inline-block;
position: relative;
animation: 3s linear 0s infinite alternate move;
}
.animated > *.min {
min-width: 100%;
}
#keyframes move {
0%,
25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}
/* Non-solution styles */
.container {
display: flex;
flex-wrap: wrap;
}
.animated {
font-size: 2rem;
font-family: sans-serif;
border: 0.1rem solid black;
margin: 1rem;
}
.animated > * {
box-sizing: border-box;
padding: .5rem 1rem;
}
<div class="container">
<div class="animated">
<span>Short</span>
</div>
<div class="animated">
<span class="min">Short</span>
</div>
<div class="animated">
<span>Some more text</span>
</div>
<div class="animated">
<span>A really long text to scroll through</span>
</div>
</div>
change your keyframe value in %
Try This
body{
overflow: hidden;
}
p{
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}
#-webkit-keyframes floatText{
from {
left: 00%;
}
to {
/* left: auto; */
left: 100%;
}
}
<p>hello text</p>
hi dude i have tried this
Note : but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't
see the whole text of the div.
and that is due to the value of the left and right i have set to the -100 and 100 so because i couldn't find the alternative for that so
right now trying to see that how can you make this happen.
and here is my try
div.main_div{
margin:0;
padding:0;
width: 20%;
height: 60%;
background-color:grey;
position:absolute;
overflow: hidden;
}
div.transparent_div{
width:100%;
height:50px;
bottom:0;
background:red;
position:absolute;
}
div.text_wrapper{
height:50px;
bottom:0;
z-index:10;
background:transparent;
white-space: nowrap;
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
color:white;
font-size:2em;
vertical-align: middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
position:absolute;
-webkit-animation: anim 1.5s infinite;
animation: anim 1.5s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
#-webkit-keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
#keyframes anim {
from {
left: -100%;
}
to {
left:100%;
}
}
<body>
<div class="main_div">
<div class="text_wrapper">Hiii i am going right to left infinete times and here are the news
</div>
<div class="transparent_div"></div>
</div>
</body>
and here you can check out the demo of the above working code
DEMO CODE
Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.
we can write jQuery code, for finding over-flow text and enable animation:
function AutoScrollText() {
var els = document.getElementsByClassName('container');
[].forEach.call(els, function myFunction(el) {
var isOverflowing = el.clientWidth < el.scrollWidth;
if (isOverflowing) {
$(el).children('span:first-child').addClass('animated');
}
var curOverf = el.style.overflow;
if (curOverf == "" || curOverf === "visible") {
$(el).css({ "overflow":"hidden"});
}
});
}
I have a list and when I add an item to this list I wish to animate it into view and any existing items that are currently in view should also animate in parallel - think of a vertical conveyor belt going top to bottom.
I have the whole thing nearly working apart from the viewable items are snapping into place when adding a new item. Here's a snippet if code:
<div class="outerContainer">
<div class="container" ng-repeat="item in items">
.....
</div>
</div>
.outerContainer {
height: 200px;
overflow: hidden;
}
.container {
position: relative;
background-color: lightgray;
margin: 1px;
width: 200px;
height: 50px;
}
.container.ng-enter {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.container.ng-enter {
top:-50px;
}
.container.ng-enter.ng-enter-active {
top:0;
}
Any helpful pointers would be greatly appreciated.
I believe your transitions have the transition property in the wrong location, it should read like this
.container.ng-enter {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}