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%}
}
Related
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 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;
}
}
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.
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