I have a div element which I want to slide in from the bottom of the screen.
The following CSS works, however. the div takes up space, so the vertical scroll bar is visible.
How can I make this div element slide in and out (from the bottom) via this CSS keyframe without showing the scroll bar?
I tried using display: none on the div, and setting display: block in the keyframes, but that didn't work at all (the div remains display: none). CSS keyframes doesn't seem to work on display attribute.
CSS for div with animationIn class:
div.animateIn {
-webkit-animation-name: slideIn; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
animation-name: slideIn;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
CSS keyframe to slide in:
#keyframes slideIn {
0% {
top: 100vh;
display: block;
}
100% {
top: 25vh;
display: block;
}
}
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%}
}
Could someone tell me how to make a div that will make two animations, but the second div should be only when the first is completed?
.CodeMode {
z-index: 1;
position: absolute;
animation: MoveTop 2s, FullScreen 3s;
}
#keyframes MoveTop {
from {top: 90%;}
to {top: 0%;}
}
#keyframes FullScreen {
from {height: 10vh;}
to {height: 100vh;}
}
Example of how I want that to work:
MoveTop --> Waiting until the animation ends --> FullScreen
Add a delay to your second animation, which is the third value after the animation name in the animation property.
Per MDN:
The animation shorthand CSS property applies an animation between
styles. It is a shorthand for animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count,
animation-direction, animation-fill-mode, and animation-play-state.
To apply this in your code:
.CodeMode {
z-index: 1;
position: absolute;
animation: MoveTop 2s, FullScreen 3s linear 2s;
}
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.
I'd like to add a menu button in the top right corner of my site - just a simple circle with an icon. I'd like to to load at a certain height and width and then automatically shrink, a few moments later, to another height and width - all without any user interaction.
Is this possible?
Any CSS gurus out there?
Many thanks,
You can do it with the CSS3 Animation:
div {
width: 50px;
height: 50px;
background: #00f;
border-radius: 50%;
animation-name: shrink; /* "calling" the animation */
animation-duration: 1s; /* adjust */
animation-timing-function: linear; /* specifies the speed curve of an animation / also try other values */
animation-delay: 3s; /* adjust */
animation-fill-mode: forwards; /* retains in the state set by the last keyframe */
}
#keyframes shrink { /* let's call it "shrink" */
0% {width: 50px; height: 50px}
100% {width: 25px; height: 25px} /* final state */
}
<div><div>
Experiment and adjust to your needs.
Note: There are also other animation properties & values so you might take a closer look to see what you can do.
http://jsfiddle.net/nicktheandroid/vX7CV/10/
This is a simple example, but for what I need this for, transition will not work, animation needs to be used.
When hovering the element, the animation smoothly animates the element, when hovering off of the element it snaps back to it's original settings without smoothly animating back.
Is there a way to cause it to animate back to it's settings instead of snapping back like it is?
Animate needs to be used for the :hover event, but when hovering off the element, I could use transition, if this would work, I can't get it to work though.
I have tested you version in Google Chrome and it worked fine for me.
Also added in the Firefox compatibility and that also worked fine for me.
Here is what I have now:
HTML:
<ul>
</li>test</li>
</ul>
CSS:
ul {
background-color:black;
color:white;
width: 100px;
height:100px;
}
#-moz-keyframes flow-down {
0% {
padding-bottom: 0%;
}
100% {
padding-bottom: 30%;
}
}
#-webkit-keyframes flow-down {
0% {
padding-bottom: 0%;
}
100% {
padding-bottom: 30%;
}
}
ul:hover {
-moz-animation-name: flow-down;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation-name: flow-down;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode:forwards;
}
And here is the JSFiddle version just incase:
http://jsfiddle.net/NQ5xk/1/
Hope this helps.
Regards
in firefox, if you have change 'position' or 'z-index' attr during the animation, animation will not run