SlideDown type of animations are very useful to show the user what is changing in the layout. I used to do this with JQuery, but I rather have a CSS only solution.
If the element is positioned absolute, everything is perfect with using transform: scale. But it is possible to do the same when the element is taking space and should move things around?
I don't mind that it grabs it's space in one big step - as long as the animation shows some kind of direction for the eye to follow.
There is the work around with max-height - like here: https://stackoverflow.com/a/8331169/647845
, but what I don't like is that I have to estimate the height, otherwise the animation looks clunky or you're missing content.
I'm perfectly fine for using transform: scale and having a jump in the other elements. In combination with display: block it does not work though. I'm looking for animating both up and down.
Is there a (simple) alternative?
In conclusion I'm looking for an alternative to animating the delay of display: none/block.
.lolcat
{
transition: transform 200ms ease-in-out;
transform: scale(1,0);
transform-origin: 0 0;
display: none;
}
.lolcat.expanded
{
transform: scale(1,1);
display: block; /* I wish you'd be delayable */
}
You can use margin-top property and animate menu.
See the Snippet below:
#lolcat-container{
overflow:hidden;
}
.lolcat
{
border:1px solid black;
background:red;
color:white;
margin-top:-100%;
animation-direction: reverse;
animation:1s 1 alternate forwards close;
}
#menu:hover .lolcat
{
animation:1s 1 alternate forwards open;
}
#keyframes open {
0% {
margin-top:-100%;
}
100% {
margin-top:0%;
}
}
#keyframes close {
0% {
margin-top:0%;
}
100% {
margin-top:-100%;
}
}
<div id="menu">
<a>hover me</a>
<div id="lolcat-container">
<ul class="lolcat">
<!-- Create a bunch, or not a bunch, of li's to see the timing. -->
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div>
Content
</div>
</div>
You can also test it here
Related
I am trying to wrap my head around the CSS animation property. In my current code, I have basically this structure:
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
The li's inside are generated via JS, and what I'd like to do is animate the expansion so it's not as abrupt. I attached
animation: 1s linear;
to the outermost div, but it doesn't animate. What I'm trying to do is as the li's are added/removed, the height of the wrapper should animate instead of simply change. I've been looking through various docs and sites, but I can't figure out if I don't understand the property or if I'm using it wrong.
First of all, it's good to know the difference between transition and animation in CSS, and when to use each.
transition is used when you want to animate changes to either specific properties (transition: opacity .5s, color .5s), or all properties (transition: all .5s) as they are altered. This way, if you change a property like opacity via - for example - a CSS hover state, or JavaScript, that change will animate.
animation is used to set a keyframe animation to an element, where you predefine a sequence of steps that can affect one or more properties of that element.
The type of animation you're requesting - simply animating an element in/out as it is added or removed from the DOM - does not exist in CSS alone. However, many JavaScript libraries can intelligently add/remove CSS classes while an element is added/removed, allowing CSS animations to carry out.
With that said, there is a way we could decently animate in <li> elements with CSS alone, by having them start with a keyframe animation.
Here's a live demo where I'm doing just that by animating each new <li>'s height from 0 to 2em (which I've specified as the line-height). Note that width and height can only transition to a specified value - not auto.
$('button').on('click', function() {
$('ul').append('<li>List Item</li>');
});
div {
border: 1px solid teal;
border-radius: 4px;
padding: 1em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
animation: grow 1s;
line-height: 2em;
overflow-y: hidden;
}
#keyframes grow {
0% {
height: 0;
}
100% {
height: 2em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>List Item</li>
</ul>
<button>Add to List</button>
</div>
I want to be able to have a side-bar slide in. I have almost gotten there but I am having issues with the main view snapping into place while the side bar slides in. I have created this Plunkr to demonstrate the problem I'm having. Notice how the body doesn't move with the side-panel. How can I make this work as I expect?
body:
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ui-view class="slide"></div>
</div>
side-panel:
<div class="side-panel-body">
<a href ui-sref="main">hide side panel</a>
</div>
css:
.container {
display: flex;
height: 400px;
padding: 20px 0;
}
.child {
background: yellow;
flex: auto;
}
.side-panel-body {
width: 400px;
height: 100px;
background: lightgray;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 2s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(100%, 0);
}
Without going into too much detail about transformations. The easy answer is that translating a DOM element has no effect on other DOM elements.
So you have a flexbox with 2 divs in it. They're functioning as expected. When you expand the window, the left div expands to fill, as it's set to flex: auto, while the right div stays at 400px of fixed width.
When you transform: translate the righthand div, all you are doing is visually moving it. It's container, as well as the lefthand div, still consider it to be exactly where it started. That is, until you actually hide it or remove it. When the right hand div is hidden, then you can see the lefthand div fill up the flex-box.
So to achieve what you want, you'd need to either animate both divs, lefthand for size, and righthand for translation. Or actually change the width of the righthand div, allowing the transition: all 2s ease;to handle the animation for you.
Thanks to #CH Buckingham I came up with a solution. It's not exactly how I imagined, but it works just fine and really isn't THAT hacky. This allows you to toggle the sidebar with a scope variable but you can have the flexibility of content with ui-router.
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ng-show="showSidebar" class="sidebar">
<div ui-view class="uiview"></div>
</div>
</div>
css (less):
.container {
display: flex;
}
.child {
flex: auto;
}
.sidebar {
width: 1000px; // for some reason this acts more like a max-width for the sidebar. The actually width matches the size of the ui-view.
&.ng-hide-add, &.ng-hide-remove {
transition: all ease .8s;
overflow-x: hidden;
}
&.ng-hide {
width: 0;
}
}
I know my question may look weird at first, but let me explain...
I have a div, named subcontainer which contains two elements :
Two icons and a link.
Basically, I want the div to make the two icons disappear on hover, BUT not my link. Here is my code :
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
Follow me
<img class="icons" src="images/arrow_left.png"/>
</div>
**Edit : I want the icons to disappear on subcontainer:hover. Not on icons:hover.
If you have any questions to help me, just ask! :)
Use psuedo selectors:
View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/
By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
Follow me
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}
If you want to make the image fade, use the following CSS:
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.icons:hover{
opacity:0;
}
Here's a fiddle: http://jsfiddle.net/74wPn/
EDIT: Revised to fit asker's comment's needs.
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.subcontainer:hover .icons{
opacity:0
}
Updated fiddle: http://jsfiddle.net/74wPn/1/
Do this way:
.icons:hover {
display: none;
}
If you want it to disappear instantly:
.icons:hover {
display: none;
}
If you want it to do it over a set time period:
.icons:hover {
transition: 0.2s;
opacity: 0;
}
You can use jquery.
$(".icons").hover(function(){
$(".icons").hide();
});
I want create 2 divs like this picture
i have tried this for div 1 but it doesnt look good. can you help me please?
.div1 {
-webkit-transform:perspective(2500px) rotate3d(1, 0, 0, 46deg);
-webkit-transform-origin:100% 0%;
-webkit-transform-style:preserve-3d;
}
transform-style:preserve-3d; is something you use when you have nested 3D transformed elements and you want to create a realistic 3D look (and you apply it on the parent element in that case). You have no need for it here.
The effect you want is actually really simple to achieve:
DEMO
HTML:
<div class='parent'>
<div class='div1'>div1</div>
<div class='div2'>div2</div>
</div>
Relevant CSS:
.parent { perspective: 20em; }
.div1 {
transform: rotateX(30deg);
transform-origin: 0 100% 0;
}
I want to create an animated HTML "marquee" that scrolls back and forth on a website:
<div class="marquee">This is a marquee!</div>
and the CSS:
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
#-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
EDIT: Oddly, this does not work:
50% {right: 0%}
Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
You could simply use CSS animated text generator. There are pre-created templates already
Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>
HTML
<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>
CSS
.wrapper{
max-width: 400px;
background: green;
height: 40px;
text-align: right;
}
.marquee {
background: red;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
see the demo:- http://jsfiddle.net/gXdMc/6/
I like using the following to prevent things being outside my div elements. It helps with CSS rollovers too.
.marquee{
overflow:hidden;
}
this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.
If I understand you question correctly, you could create a wrapper around your marquee and then assign a width (or max-width) to the wrapping element. For example:
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
And then #marquee-wrapper { width: x }.
I am not sure if this is the correct solution but I have achieved this
by redefining .marquee class just after animation CSS.
Check below:
<style>
#marquee-wrapper{
width:700px;
display:block;
border:1px solid red;
}
div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}
#-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{
left:700px; top:0px
}
</style>
<!-- HTMl COde -->
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>