Referring to this sample:
https://codepen.io/jyloo/pen/KKwoLKB
I noticed when I have an animated container with animation-fill-mode set to forward, the absolute positioned child elements (popup) inside it doesn't display as expected, and it seems like their z-index is being ignored.
My animation:
.animate {
animation-direction: reverse;
}
.animate.animate--from-bottom {
opacity: 0;
animation: from-bottom 0.3s ease-out;
animation-fill-mode: forwards;
}
#keyframes from-bottom {
0% {transform: translateY(80px);opacity:0;}
100% {transform: translateY(0px);opacity:1;}
}
My Child Element (popup)
.popup {
z-index: 10;
position: absolute;
background: white;
padding: 0 1rem;
box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
width: calc(300px - 2rem);
}
If I remove the animation-fill-mode, the child elements display just fine.
Can anyone help me to understand this behavior and the workaround so that my child element (popup) can work find under and animated parent.
you can the css property like below for 3rd div.
To make 2nd div's content visible on top, you can try setting 3rd's z-index to lower value.
.dv {
position: relative;
z-index: -1;
}
demo - https://codepen.io/AB-DEV/pen/LYEdKPj.
you have to add class to the parent <div> of popup.
suppose I have add class have_popup to the parent div of popup <div class="card have_popup">.
now apply css to that class as below:
.have_popup {
position: relative;
z-index: 1;
}
I hope this will works fine for you.
Thank you...
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I have a menu system where that when a ‘menu’ button is clicked some simple javascript allows a mobile menu to be shown as a drop-down.
I would like to have it so this menu transitions / animates in, but the display: none property seems to not be animatable with CSS animations. I don’t really want to just use opacity: 0 because the mobile menu will then be in the document flow, and on desktop devices I don’t wish this to be the case.
Is there any CSS solution to this? When I use the Greensock animation library, it allows you to animate or change the ‘display’ property. I can’t seem to get this to work with CSS animations though?
I’ve created a simple pen where I’ve just used a single div that animates (to keep it simple I haven't included any JS click events etc with this).
As you can see I’ve commented out the display: none on both the CSS for the id#bluebox and on the #keyframes animation. If you un-comment these you can see the problem that is created.
https://codepen.io/emilychews/pen/xPWddZ
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
/* display: none; */
}
#keyframes appear {
0% {/*display: none;*/ opacity: 0}
1% {display: block; opacity: 0.1;}
100% {opacity: 1;}
}
HTML
<div id="bluebox"></div>
I solved this by adding a transform: scaleY(0) to the element, and then animated this with the element on opacity: 0 for the first 1% of the animation, so you couldn't see the element 'scale up' so to speak. I used scale instead of width and height because width and height properties don't animate very well in terms of achieving the 60fps smoothness.
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
transform: scaleY(0);
}
#keyframes appear {
0% {opacity: 0;}
1% {opacity: 0; transform: scaleY(1)}
100% {opacity: 1; transform: scaleY(1)}
}
In this case, since you're attempting to animate the element, I would say you should probably use width and height to your advantage instead.
Something like this could act as a substitute for display none. (Codepen)
#bluebox {
width: 0px;
height: 0px;
}
#keyframes appear {
0% {
width: 0px;
height: 0px;
}
100% {
width: 100px;
height: 100px;
}
}
The width or height could also be replaced with your end width/height to allow for a more natural animation, depending on your goal. I can update the Codepen to include an example of what I mean if you'd like.
Let me know if this is what you were aiming for!
Edit: Fixed the Codepen link
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.
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'm making a css animation (for starters just in Chrome, to avoid needing to retype a bunch of browser specific code a hundred times) with quite a lot going on:
First these steps simultaneously:
Children of element fade out
Height of element changes to fixes height
Background color of element changes
Next step:
Fade in a hidden element
As for what I have, all of step 1 seems to work. I'm tryng to do this all by adding a single class to the element itself, but this causes some difficulties with step 2. Because when the class is added the hidden element should be display: block;, but this unfortunately causes it to already take up space when the first steps are still going on.
Here is a live demo. It only needs to be 1-way, so you have to re-run the fiddle to try the animation again.
This is some basic html:
<div class="card">
<div class="check"><svg style='width:100px;height:100px; margin: 10px auto 10px auto; z-index:20; display: block;' viewBox='0 0 24 24'><path fill='red' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /></svg></div>
<div>Random content</div>
</div>
And a part of the css:
.card.done div:not(.check){
transition: opacity .5s ease-in-out;
opacity: 0;
}
.check:not(.done){
display: none;
margin: auto;
opacity: 0;
transition: opacity 1s 0.5s ease-in-out;
}
.check svg{
height:100px;
margin:10px auto 10px auto;
}
.card.done div.check{
display: block;
opacity: 1;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes fadeInFromNone {
0% {
display:none;
opacity: 0;
}
50% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
.card.done{
transition: height .5s ease-in-out;
background-color: #4CAF50;
height: 120px !important;
}
I not entirely sure I understand the problem but I think what your wanting is the SVG element to not take up space which you can do by making it position absolute
http://jsfiddle.net/p9czu73n/
.card.done div.check{
position:absolute;
margin-left:-50px;
left:50%;
....
}
just use:
$(".card").css("height", "auto");
or use add
height:auto; to .card class
anything will fine