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;
}
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 div element, which has an animation to play when starting the page. I want to make it have another animation to play when I'm hovering over it. It works just fine, but when I get my mouse out of the div element, it plays the starting animation again (fades in from out of the screen).
#keyframes div{
0%{
opacity: 0;
}
}
#keyframes divHover{
50%{
top: 200px;
}
100%{
top: 0px;
}
}
#div{
opacity: 1;
animation: div 1s;
position: absolute;
left: 0px;
top: 0px;
}
#div:hover{
animation: divHover 1s linear 0s infinite;
}
<div id="div"> abc </div>
Expected:
Div starts invisible and fades in. When hovering div, it goes up and down, and keeps doing it while hovering. After stopping the hover, div stops the animation and keeps its full opacity
Actual:
After stopping the hover, div stops the animation but returns to 0 opacity, then takes one second to display the starting animation again.
https://jsfiddle.net/odq125Lu/6/
The issue is due to the fact that you are overriding the first opacity animation with the up & down one then when you unhover you active the first one again.
You can use multiple animations and consider animation-play-state to activate the second one:
#keyframes div {
0% {
opacity: 0;
}
}
#keyframes divHover {
50% {
top: 200px;
}
100% {
top: 0px;
}
}
#div {
opacity: 1;
animation:
div 1s,
divHover 1s linear 0s infinite;
animation-play-state:running,paused;
position: absolute;
left: 0px;
top: 0px;
background:red;
padding:20px;
}
#div:hover {
animation-play-state:running,running;
}
<div id="div"> abc </div>
I'm no expert, but it may have something to do with the fact that you haven't set a 100% value for the animation "divHover"?
#keyframes div{
0%{
opacity: 0;
}
100% {
opacity: 1;
}
}
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 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'm having some issues when using a delay with CSS animation.
My desired effect in the example:
The red box starts transparent waits 1 second, then fades in.
This happens in Chrome.
However, the behaviour in IE and Firefox is different:
The box starts visible, waits 1 second, then disappears and fades back in.
Which behaviour is correct? It seems to me that if you're going to delay an animation, it makes sense to wait at the first frame of the animation, not the last frame.
Is there a workaround without Javascript?
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
height: 200px;
width: 200px;
background: red;
-webkit-animation: fadeIn 1s 1s;
animation: fadeIn 1s 1s;
}
<div class="box"></div>
You could use animation-fill-mode to determine how to 'fill' your animation when it ends. You can revert it to before, after, initial, etc... Its not the most intuitive naming convention, but it does allow you to set your animation to start with opacity : 0; and then retain the computed value you want after the animation using animation-fill-mode: forwards;.
MDN has a good explanation for it: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode