This code used to work fine in Google Chrome last time but now it doesn't work anymore. The bars will fill up by a solid colour animating (2 seconds) in when you scroll it in view.
Internet Explorer works fine.
Any help, please? I've tried looking around but to no avail.
.levelPM {
height: 25px; /* IE CSS Variables Fallback */
height: var(--bar-h);
width: 0px;
background: #7ae89f; /* IE CSS Variables Fallback */
background: var(--projectmanage-col);
}
.projectmanage.start {
-webkit-animation: projectmanage 2s ease-out forwards;
-moz-animation: projectmanage 2s ease-out forwards;
-o-animation: projectmanage 2s ease-out forwards;
animation: projectmanage 2s ease-out forwards;
}
#-webkit-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#-moz-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#-o-keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
#keyframes projectmanage {
0% { width: 0px; }
100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}
Full code: https://pastebin.com/TegPh7pf
Chrome will not trigger the scroll if the page has no scroll, use "bind (wheel)" instead.
$(window).bind("wheel", function() {
console.log("asdads")
checkAnimation2();
});
Live example: https://codepen.io/dobladov/pen/aXZpNP
Related
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 4 years ago.
I have finally made my background image fade in when my webpage loads, and now I want the animation to be a little delayed so you are able to se the background color for a moment.
I have tried to use the "animation-delay: 2s;" thing in css, but when the page loads, the image is already shown and the animation just starts after 2 seconds. This means that the image is shown, then disappears and then do the animation. I then tried to set the image to "opacity: 0;", but then problem just turns around. So now the image isn't shown to begin with, then the animation tuns, but after that the image disappears again
html:
<div class="imageThing">
</div>
css:
/* attempt 1 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* attempt 2 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
opacity: 0;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
I need the image to be invisible until a number of seconds after the page loads until the animation begins, and then stay visible. I hobe you can help me :)
You can add animation-fill-mode: both to hold the animation before and after.
.imageThing {
animation-fill-mode: both;
}
I'm trying to make a simple sliding div which appears with one button and disappears with another. The problem is I can just about make it appear if I remove the css for the close it lets the open work. I've commented out the code that prevents the openImage from working. If someone can have a look at this and know where I'm going wrong that would be great.
Thanks in advance.
function closeImage() {
document.getElementById("main-image").className = "closed";
}
function openImage() {
document.getElementById("main-image").className = "open";
}
.closed {
height: 0;
overflow: hidden;
background: red;
//oz-animation: slide 1s backwards;
//ebkit-animation: slide 1s backwards;
//-animation: slide 1s backwards;
//s-animation: slide 1s backwards;
//imation: slide 1s backwards;
}
.open {
height: 0;
overflow: hidden;
background: red;
-moz-animation: slide 1s forwards;
-webkit-animation: slide 1s forwards;
-o-animation: slide 1s forwards;
-ms-animation: slide 1s forwards;
animation: slide 1s forwards;
}
#-moz-keyframes slide
/* Firefox */
{
from {
height: 0;
}
to {
height: 300px;
}
}
#-webkit-keyframes slide
/* Safari and Chrome */
{
from {
height: 0;
}
to {
height: 300px;
}
}
#-o-keyframes slide
/* Opera */
{
from {
background: red;
}
to {
background: yellow;
}
}
#-ms-keyframes slide
/* IE10 */
{
from {
height: 0;
}
to {
height: 300px;
}
}
#keyframes slide {
from {
height: 0;
}
to {
height: 300px;
}
}
<div id="main-image" class="closed"></div>
<button onclick="openImage();">Open Div</button>
<button onclick="closeImage();">Close Div</button>
just use css transitions
#main-image {
height: 0px;
overflow: hidden;
background: red;
transition: height 1s;
}
#main-image.open {
height: 300px;
}
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 7 years ago.
Look at the css below. bottom:0 doesn't get applied at all once the animation is over
div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
font-weight: bold;
-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
animation: mymove 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
div:empty {
-webkit-animation: mymoveClose 1s; /* Chrome, Safari, Opera */
animation: mymoveClose 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Standard syntax */
#keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
/* Standard syntax */
#keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
Here is the fiddle
http://jsfiddle.net/uk4gxr8c/
You need to specify an animation-fill-mode.
In this case forwards will cause the animation to end at the final value.
Per MDN
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:
setTimeout(function() {
document.getElementById('div1').innerHTML = '';
}, 3000);
div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
height: 30px;
font-weight: bold;
box-sizing: border-box;
-webkit-animation: mymoveClose 1s;
/* Chrome, Safari, Opera */
animation: mymoveClose 1s linear forwards;
}
div:empty {
-webkit-animation: mymove 1s;
/* Chrome, Safari, Opera */
animation: mymove 1s linear forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Standard syntax */
#keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
/* Standard syntax */
#keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
<div id="div1">linear</div>
I use CSS Animation and media queires like this!
HTML
<div class='block'>
<div class='block-bar'></div>
</div>
CSS
.block-bar {
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}
it work correctly in Chrome and Firefox but not working in IE
How to fix it? Thank you.
The problem is that IE doesn't like it when keyframes are defined within mediaqueries. If you pull the definition for the keyframes outside the mediaquery it works. (Tested in IE11)
#keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0%; }
}
#media(min-width: 300px){
.block-bar {
height: 50px; background-color: red;
-webkit-animation: timebar 1s infinite;
-moz-animation: timebar 1s infinite;
animation: timebar 1s infinite;
}
#-webkit-keyframes timebar {
0% { width: 0%; }
99% { width: 100%; }
100% { width: 0; }
}
}
I'm running into a problem. I'd simply like to, once one CSS3 animation has completed, have my next animation begin (ideally a fade in)
Here's the first animation code:
#truck {
position: absolute;
margin-top:90px;
-moz-animation: slide 4s;
-webkit-animation: slide 4s;
-ms-animation: slide 4s;
animation: slide 4s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}
#-webkit-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}
#-ms-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}
If anyone can help me with the second animation and how to call that once the first one is completed, I would greatly appreciate it.
I think you can use delay:
animation-delay:4s;
-moz-animation-delay:4s; /* Firefox */
-webkit-animation-delay:4s; /* Safari and Chrome */
-o-animation-delay:4s; /* Opera */
(adjust number to fit)