I'm having some trouble figuring out how best to get this animation to work.
I have two elements that are centered vertically inside of a flexbox layout, I want to get these elements to animate into their final positions by sliding in from off-screen, however, this seems to be giving me some unexpected results I assume because of their flex positioning. Any thoughts on how I can tackle this?
Here is a plunker showing the current state of things, I've slowed the animation down so you can see the dilemma and where I'm trying to take this.
.scroller-item-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
overflow: hidden;
.scroll-animator {
position: relative;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
transform: translateY(100%);
&:not(.pre-animated){
animation-name: scrollItemIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
&:last-of-type {
animation-delay: 1300ms;
}
}
&.leaving {
animation-name: scrollItemOut;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: translateY(0%);
&:last-of-type {
animation-delay: 300ms;
}
}
&:last-of-type {
.scroller-item {
margin-bottom: 0;
}
}
}
...
}
https://plnkr.co/edit/MPyuTSjy2s5XWLk5EVVD?p=preview
When using percent with translate, it is the elements own size it refers to, which means, if an element is 200px high, translateY(100%) will move it 200px (100% of its own height) down.
In this case you can use viewport units instead, i.e. transform: translateY(100vh);, which means it will position the element at the bottom of the viewport, no matter its height.
Updated codepen
Related
I'm trying to do some simple animations for a mobile design. I want to slide in some elements from outside the screen. It works when the elements come from the left, but not when they come from the right, because the browser expands.
Can someone come up with a simple solution?
(view the page in Iphone size window)
http://e-daktik.dk/notesbogfull.html
my animations look like this:
.jaeger {
animation-duration: 3s;
animation-name: slidein1;
animation-delay: 1.0s;
animation-fill-mode: backwards;
}
#keyframes slidein1 {
from {
margin-left: 100%;
width: 100%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
ty.
Set an overflow-x: hidden; to the parent container and give it 100% width. This should hide the element as is slides in from the right.
Their is bit complications but I think it isn't possible to do what I want with just CSS3 alone.
I have three images in header, I want images to show up with fade-in fade-out effect by using opacity in CSS animation.
I was thinking what if I could select nested elements in animation and animate them. Creating chain animation is bit difficult.
Try using transition-delay property to delay the animation.
Simply apply animation rules to your images. Using animation-delay a chain effect can be produced.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
background-color: #000;
}
img {
margin: auto;
width: 33.333%;
opacity: 0;
animation-name: fade;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes fade {
50% {
opacity: 1;
}
}
img:nth-child( 2 ) {
animation-delay: 0.5s;
}
img:nth-child( 3 ) {
animation-delay: 1s;
}
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
In the included example found on codepen from CSS-Tricks , which
property in the css code determines the shape of the div?
I understand most of the css properties here. I am just wondering what
determines the shape, and if there is a way to describe/or make other
shapes. For example a star or triangle.
I am new to css and would like to learn the language, especially
animation tricks.
.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
#keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<div class="element"></div>
The shape here is determined by border-radius, which can be used to round out the edges of an HTML element (turning a box into a rounded rectangle), or with enough radius (or border-radius: 50%), it can transform a square element into a circle. There's no similar way to produce other shapes (triangle, star, etc), though there are many outside-the-box and creative ways to do this, like using borders to make a CSS triangle.
I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not.
I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility (which I use often in my transition).
Right know I have this terrible javascript function :
<script type="text/javascript">
$(document).ready(function(){
$(".js_only").hide();
setTimeout(function () {
$(".js_only").show();
}, 3000);
});
</script>
I tried some animation in CSS but no result ... nothing seems to work.
I have few animation in my page, but just struggling with the display: none; on animation.
#-moz-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
#-webkit-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
#keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
.css_only {
-moz-animation-name: showEffect;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 2.3s;
-webkit-animation-name: showEffect;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 2.3s;
animation-name: showEffect;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2.3s;
}
It is important as hidden, this element does not take space at all. I created a JSFiddle to make quite tests.
My main concerne is SEO ... I don't think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.
Thanks for reading, hope someone has an answer.
You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations.
visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility doesn't tween between keyframes, it just steps harshly.
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
#keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
<div class="ele"></div>
If you want to fade, you use opacity. If you include a delay, you'll need visibility as well, to stop the user from interacting with the element while it's not visible.
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
<div class="ele"></div>
Both examples use animation-fill-mode, which can hold an element's visual state after an animation ends.
Use animation-delay:
div {
width: 100px;
height: 100px;
background: red;
opacity: 0;
animation: fadeIn 3s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Fiddle
You can play with delay prop of animation, just set visibility:visible after a delay, demo:
#keyframes delayedShow {
to {
visibility: visible;
}
}
.delayedShow{
visibility: hidden;
animation: 0s linear 2.3s forwards delayedShow ;
}
So, Where are you?
<div class="delayedShow">
Hey, I'm here!
</div>
Unfortunately you can't animate the display property. For a full list of what you can animate, try this CSS animation list by w3 Schools.
If you want to retain it's visual position on the page, you should try animating either it's height (which will still affect the position of other elements), or opacity (how transparent it is). You could even try animating the z-index, which is the position on the z axis (depth), by putting an element over the top of it, and then rearranging what's on top. However, I'd suggest using opacity, as it retains the vertical space where the element is.
I've updated the fiddle to show an example.
Good luck!
you can't animate every property,
here's a reference to which are the animatable properties
visibility is animatable while display isn't...
in your case you could also animate opacity or height depending of the kind of effect you want to render_
fiddle with opacity animation
I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.
When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn't slide in at all.
How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
I am using Animate.css for the animations.
Here is what the code looks like:
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>
As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:
#main-div{
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
It is at that point that I would like the main div to push the other divs down as it comes in.
How do I do this?
Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.
EDIT
I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code:
HTML
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
CSS
#main-image{
height: 0;
overflow: hidden;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
height: 375px;
}
CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);
#main-image{
height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
#-prefix-keyframes slide {
from {height: 0;}
to {height: 300px;}
}
You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.
You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/
There are a few answers already, but here is my solution:
I use opacity: 0 and visibility: hidden. To make sure that visibility is set before the animation, we have to set the right delays.
I use http://lesshat.com to simplify the demo, for use without this just add the browser prefixes.
(e.g. -webkit-transition-duration: 0, 200ms;)
.fadeInOut {
.transition-duration(0, 200ms);
.transition-property(visibility, opacity);
.transition-delay(0);
&.hidden {
visibility: hidden;
.opacity(0);
.transition-duration(200ms, 0);
.transition-property(opacity, visibility);
.transition-delay(0, 200ms);
}
}
So as soon as you add the class hidden to your element, it will fade out.
I had the same problem, because as soon as display: x; is in animation, it won't animate.
I ended up in creating custom keyframes, first changing the display value then the other values. May give a better solution.
Or, instead of using display: none; use position: absolute; visibility: hidden; It should work.
You can manage to have a pure CSS implementation with max-height
#main-image{
max-height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
#keyframes slide {
from {max-height: 0;}
to {max-height: 500px;}
}
You might have to also set padding, margin and border to 0, or simply padding-top, padding-bottom, margin-top and margin-bottom.
I updated the demo of Duopixel here : http://jsfiddle.net/qD5XX/231/
The following will get you to animate an element when
Giving it a Display - None
Giving it a Display - Block
CSS
.MyClass {
opacity: 0;
display:none;
transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
}
JavaScript
function GetThisHidden(){
$(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}
function GetThisDisplayed(){
$(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}
function HideTheElementAfterAnimation(){
$(".MyClass").css("display", "none");
}
When animating height (from 0 to auto), using transform: scaleY(0); is another useful approach to hide the element, instead of display: none;:
.section {
overflow: hidden;
transition: transform 0.3s ease-out;
height: auto;
transform: scaleY(1);
transform-origin: top;
&.hidden {
transform: scaleY(0);
}
}
How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
Here is my solution to the same problem.
Moreover I have an onclick on the last frame loading another slideshow, and it must not be clickable until the last frame is visible.
Basically my solution is to keep the div 1 pixel high using a scale(0.001), zooming it when I need it. If you don't like the zoom effect you can restore the opacity to 1 after zooming the slide.
#Slide_TheEnd {
-webkit-animation-delay: 240s;
animation-delay: 240s;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-duration: 20s;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-moz-animation-name: Slide_TheEnd;
-webkit-animation-name: Slide_TheEnd;
animation-name: Slide_TheEnd;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-moz-animation-direction: normal;
-webkit-animation-direction: normal;
animation-direction: normal;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform: scale(0.001);
background: #cf0;
text-align: center;
font-size: 10vh;
opacity: 0;
}
#-moz-keyframes Slide_TheEnd {
0% { opacity: 0; transform: scale(0.001); }
10% { opacity: 1; transform: scale(1); }
95% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.001); }
}
Other keyframes are removed for the sake of bytes. Please disregard the odd coding, it is made by a php script picking values from an array and str_replacing a template: I'm too lazy to retype everything for every proprietary prefix on a 100+ divs slideshow.
I have the same problem and solved putting everything bellow a div with position:relative and added position: absolute, top:0, left:0 to every child div.
In your case it will be like:
<div id="upper" style="position: relative">
<div id="main-div" class="animated fadeInDownBig" style="position: absolute; left:0; top:0;"><!-- Content --></div>
<div id="div1" style="position: absolute; left:0; top:0;""><!-- Content --></div>
<div id="div2" style="position: absolute; left:0; top:0;""><!-- Content --></div>
<div id="div3" style="position: absolute; left:0; top:0;""><!-- Content --></div>
</div>