We Keep Coding

CSS- Why does text moves after it is generated (animation)

I have a quesiton about animation in CSS especially on typewriting effect.
I achieved type writing effect in animation.
However,
even if I didn't set for the animation of transforming,
once the type was generated, text moves to the righthand side.
Why did it happen and how do I fix this problem?
my css animation is as below.
#keyframes fade{
0%{
transform:translateY(30px);
opacity:0
}
100%{
transform:translateY(0);
opacity:1
}
}
my full code is attached in the following link.
https://codepen.io/jotnajoa/pen/abvVzev

Looks like it is inheriting text-align:center from its parent element .beggining.
.explanation is maintaining its center status as the width of the dive grows to 100%. That is why it looks like its position is animated.

Possible to animate dynamic height using CSS? JS alternatives accepted

I'm using AngularJS which allows me to use ng-show and ng-hide to show and hide elements based on a logical condition. What I'm trying to accomplish is to animate the size changes of the container when the children objects are shown-hidden so it's less jumpy.
For those not familiar with AngularJS, ng-show and ng-hide basically just applied the display: none and display: block properties. So when a container is set to show the display is set to block.
With that out of the way, I've been reading on animating height changes through a few pages of google searches and all I can find are examples using max-height to animate it from one height to another, which are statically defined by CSS rules, for example:
#animated-div {
max-height: 100px;
transition: max-height 1s ease;
}
#animated-div.hidden {
max-height: 0px;
}
and they would remove the .hidden class to cause the transition to animate the change in height.
The issue is that I'm not opening/closing a container and there's no pre-determined height that the container will be, as the container can be modified dynamically based on a variety of variables. On-top of that the application is responsive, so the height will vary across devices.
Here is an example scenario:
- Container
- Div A (Height: 200px); Shown
- Div B (Height: 100px); Shown
- Div C (Height: 300px); Hidden
- Div Slider (Height: Dynamic) Hidden.
Currently the height of the container (which is auto) is 300px based on the children, now the user toggles Div C active, which increases the height to 600px The div should animate the expansion from 300px -> 600px now the user clicked the clear button, the children of the container are all hidden, the container should animate from 600px -> 0px.
The user then starts messing with a slider, which value ranges from 0 to 100. This height is applied to the Div Slider. Say the user slides to 57. This should cause an animation from 0px -> 57px as none of the divs are shown.
Sorry for the in-depth example of what I want, but it's the only way I can think to explain it. For reference, children in the container are scaled dynamically, using % values and vw/vh values. The size of the container when a certain combination of children are active is never the same across different resolutions, so this must be able to animate dynamic changes in height.
Javascript examples are welcome, however for this project I do not wish to involve any additional libraries, Javascript examples must work on modern mobile browsers.

Your question got me thining for a while and in the end I came up with an interesting solution.
Instead of trying to animate the parent element - animate the new children instead.
I've created a codepen here that does exactly that.
I'm using a CSS animation for both 'show' and 'hide' effects.
Here's a little LESS code for the main animations:
.parent{
width:33%;
overflow:hidden;
.child{
padding:.5rem;
border:1px solid #78909C;
border-bottom:0;
color:#fff;
animation:slideDown .2s ease-in forwards; //set basic "show" animation
transform-origin:top center; // set proper transform origin
&.removed{
animation:slideUp .2s ease-in forwards; // add different animation for "hide"
}
&:nth-child(even){background:#78909C;}
&:nth-child(odd){background:#546E7A;}
&:last-child{border-bottom:1px solid #78909C;}
}
}
I'm not sure if this solves your issue perfectly, but it's definitely something that will help you out here.

How to prevent transition to run on page load after height is set with javascript in Safari?

I have a div on a page with liquid height that i want to animate with CSS transitions to collapse/expand.
I set the default height of the div using JS, so if i change the height with CSS, it can easily revert back to the original state. Works fine, the issue is that the height animation will run on page load in Safari. (works fine in Chrome) Any idea how to fix this?
CSS:
div {
background: red;
transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
overflow: hidden;
}
div.hide {
height:10px !important;
}
JS:
$div = $('div');
$div.height($div.height());
$div.click(function(){
$div.toggleClass('hide');
});
Demo:
https://jsfiddle.net/69taau5m/1/

It might be a little hacky but you could always apply the transition to your div on click as well.
Did this pretty quick but it works. Check out the fiddle. Could always add some logic to only apply css on the first click.

Keep a CSS property until the transition of the other ends

I use the after pseudo-element to simulate a gradient transition, but my gradients can be different, so I created a class for each one of them and applied them with JS when I needed them. Of course in the general ::after I specify transition: opacity 1s; and in each one of the gradient classes I have a background and opacity: 1;. Now I stumbled upon a problem, I need to reverse the transition, but that wasn't so easy, because (since I use JS), I am removing the class, which means that the opacity transition will of course still run, but the background gets deleted immediately. How can I keep the background until the opacity transition ends?
JSFiddle: http://jsfiddle.net/5c7xfwLw/

I updated your fiddle:
http://jsfiddle.net/5c7xfwLw/1/
Because you are fading out you don't need to remove the background, like this you can do simply the opacity animation.
.green:after {
background: -webkit-linear-gradient(#53FF40, transparent 50%);
}
.fade-after::after {
opacity: 1;
}

Slide + fade effect using CSS transitions

I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...

You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.

I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.