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)
Related
I'm trying to make an animation where a picture moves to left and to the right in a loop.
By using keyframes I've achieved this, but my next step was to transform:scaleX(-1) the image instantly when the image reaches 25% and 50% and so on.. All help is appreciated!
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
<div class="container">
<div class="object"></div>
</div>
I'm not clear about how you want to use transform: scaleX(-1); in your animation, but the principle of what you are looking to achieve is definitely valid.
Essentially, my understanding is that you want to run the animation that moves your element, and at specific intervals immediately apply a transform without it being gracefully animated.
In order to achieve this, add a second animation and run it along-side the first:
animation: move 4s infinite, transformScale 4s infinite;
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
Of course, this will run exactly as the first animation, with the transition between keyframes. The solution is to use:
animation-timing-function: steps(1, end);
Which results in the animation CSS of:
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
Here's a snippet that shows it in action.
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
<div class="container">
<div class="object"></div>
</div>
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
I am currently writing a HTML5/JS Webapp which will be integrated into pre-existing HTML code. The pre-existing code contains an iframe which then loads the URL of my webapp.
I have the following animation set up in my CSS file:
#-moz-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-webkit-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
.container .left .people-container .people .person.slideInLeft {
-webkit-animation: peopleSlideLeft 0.75s forwards;
-moz-animation: peopleSlideLeft 0.75s forwards;
animation: peopleSlideLeft 0.75s forwards;
}
Now if I start my webapp in a window of its own, then the animation plays without issue, however when the webapp is loaded through the iframe, the animation does not fire (Note: This issue only occurs in IE11. Chrome, Firefox and Edge all work correctly both in iframe and out).
The slideInLeft class is definitely attached to the HTML Elements I want to animate, and the #keyframes are definitely in the loaded CSS, but the animation will still not play.
Following images are directly from the IE11 Dev Console:
Is there something I am missing?
Make sure you add non-prefix at the end
#-moz-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-webkit-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-ms-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
.container .left .people-container .people .person.slideInLeft {
-webkit-animation: peopleSlideLeft 0.75s forwards;
-moz-animation: peopleSlideLeft 0.75s forwards;
-ms-animation: peopleSlideLeft 0.75s forwards;
animation: peopleSlideLeft 0.75s forwards;
}
So I have since found out what the issue was. The parent page which contained the iframe that loaded my webapp had the following meta tag in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Modifying this to be
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10">
Which allowed the animations to complete successfully.
Here is the code, I really dont understand what is wrong.
I also tried using -webkit- but did not make any difference trying to move the objects accross the screen, simple animation
HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
CSS:
.cloud {
background: url(../image/cloudskills.svg)no-repeat;
height:100px;
width:130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(../image/balloonworks.svg)no-repeat;
width: 100px;
height: 130px;
text-indent: -999em;
animation: balloon 5s linear infinite;
}
#keyframes balloon{
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
Js Fiddle
for the elements to make some animation position should be given so aboslute or relative or you can use margin in keyframes to move the element
.cloud {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
height:100px;
width:130px;
background-size:100px auto;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
background-size:100px auto;
width: 100px;
height: 130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes balloon {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
I changed only a bit of your code http://jsfiddle.net/2gbngtxp/
#-webkit-keyframes cloud {
0% {
left: 0;
}
50% {
margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/
}
100%{
left:0;
}
I started to make a responsive portfolio for myself and ran into some weird glitch like animations.
My first question is can you put keyframes inside of a media query? or do I need to make two animations and use the media query to switch from one to the other?
If you go to the portfolio => minimize the window to a mobile view => the size of my cloud/bird/waves animations stay as the desktop size and don't change unless you refresh the page.
#media only screen and (max-width: 680px) {
/* Clouds CSS3 animations */
#-webkit-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
#-moz-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
#-ms-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
/* End Clouds CSS3 Animation */
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
#-moz-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
#-ms-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
/* End Big Wave CSS3 Animation */
}
My second(main) question is an infinite CSS3 keyframe animation seems to glitch after a few seconds like it's having a hard refresh to the animation.
On my portfolio I have two waves that goes from left-right and the other one goes from right-left.
The bottom Big-Wave works like a charm and has a very smooth animation but the smaller top wave seems to do a minor glitch after a few seconds. This isn't life or death to me but is very odd and slightly annoying to me.
Here is the css for this section:
.bigWave {
background: url(../images/bigWave.svg) repeat-x;
height: 7em;
width: 100%;
position: absolute;
bottom: 0;
-webkit-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-moz-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-ms-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-o-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
}
#media only screen and (max-width: 680px) {
.bigWave {
height: 10em;
}
}
.smallWave {
background: url(../images/smallWave.svg) repeat-x;
height: 6em;
width: 100%;
position: absolute;
bottom: 4em;
-webkit-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-moz-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-ms-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-o-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
}
#media only screen and (max-width: 680px) {
.smallWave {
height: 12em;
}
}
Here is the keyframes for the wave animation:
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-webkit-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
#-moz-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-moz-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
#-ms-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-ms-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
/* End Big Wave CSS3 Animation */
/* Small Wave CSS3 animations */
#-webkit-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-webkit-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
#-moz-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-moz-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
#-ms-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-ms-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
/* End Small Wave CSS3 Animation */
Any ideas or suggestions that you would think may be the culprit?
Any and all help is GREATLY appreciated! This is also my first time with keyframes so tips are welcomed! :]
Portfolio
JSFIDDLE
transform: translate(); is hardware accelerated and should move smoother when animating. For example, the small wave using translateY instead of bottom is less choppy: http://jsfiddle.net/fE9t9/.
/* Small Wave CSS3 animations */
#-webkit-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-webkit-keyframes Wave-Small-Size {
from, to { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(1em); }
}
#-moz-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-moz-keyframes Wave-Small-Size {
from, to { -moz-transform: translateY(0); }
50% { -moz-transform: translateY(1em); }
}
#-o-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-o-keyframes Wave-Small-Size {
from, to { -o-transform: translateY(0); }
50% { -o-transform: translateY(1em); }
}
#keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#keyframes Wave-Small-Size {
from, to { transform: translateY(0); }
50% { transform: translateY(1em) }
}
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-webkit-keyframes Wave-Big-Size {
from, to { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(1em); }
}
#-moz-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-moz-keyframes Wave-Big-Size {
from, to { -moz-transform: translateY(0); }
50% { -moz-transform: translateY(1em); }
}
#-o-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-o-keyframes Wave-Big-Size {
from, to { -o-transform: translateY(0); }
50% { -o-transform: translateY(1em); }
}
#keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#keyframes Wave-Big-Size {
from, to { transform: translateY(0); }
50% { transform: translateY(1em); }
}
Note: animations are only supported IE10+; no version supports the -ms- prefix so it should be taken out.
translate animates slightly quicker; a slight discoordination would be visible if applied to only 1 wave. So translateY should be applied to both waves to make them synchronize. Depending on your preferences, it might be necessary to make some new adjustments to the timing/movement of the waves.
As for the first issue, you can put them where you want but it doesn't work like you hope. It does indeed change the animation itself, but that newly renovated animation is not applied to the elements. You need to use a little js to switch it over to the new one
One way that (should) fix the second problem is to make the animation duration x times larger and making the background position x times larger as well. Example here.
I'd recommend cleaning up your code formatting though, it would make following it easier and perhaps show a hidden issue you're not accounting for