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.
Related
Hi im working on a CSS only animation and I need to make a block appear on a card here the 0% and 100% animation transition that activates herself with :hover
0%
100%
My need is to make the animation stay on the screen as long as my mouse is on element
TYsm
Truing using this code
div {
width: 100px;
height: 100px;
}
div:hover{
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
from {width: 0%; height:0%}
to {width: 100%; height: 100%}
}
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
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
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 button with an animated background on hover. It fills with a coloured background from left to right, however currently on mouse out it reverses the animation; the colour shrinks back toward the left and disappears. On mouse out I would like the fill to continue moving from left to right, so that it disappears out the right of the button. Any ideas? An example of this can be seen on the 'VISIT WEBSITE' button here:
http://www.notashop.com.au/new/project/lifewithbird/
Ideally would like to do this using CSS3 animation, however im feeling the active/inactive state of css3 animation may be the limiting factor here. If it cant be done using CSS3 any ideas using jQuery? A jsfiddle would be much appreciated!
Thanks for your help!
Ready for something cool... You will need to make this multi browser friendly but thats easy.
THis is ready in ff
here is the fiddle
.button {
background: blue;
width: 200px;
height: 45px;
position: relative;
}
.button:before {
background: none repeat scroll 0 0 #FFFFFF;
content: "";
height: 45px;
left: 100%;
position: absolute;
width: 200px;
z-index: 1;
transition: all 0.5s ease;
}
.button:hover:before{
-webkit-animation: left 1s;
-moz-animation: left 1s;
-o-animation: left 1s;
animation: left 1s;
animation-fill-mode:forwards;
}
.button p{
position: absolute;
left: 50%;
top: 5px;
z-index: 2
}
#keyframes left {
0% {left: -100%;}
50% {animation-play-state: paused; }
100%{left: 0%; animation-play-state: paused;}
}
Your gonna have allot of questions...