Please tell transition/animation properties for chrome differs ? or Am I doing something wrong?
: Fiddle
#-webkit-keyframes water
{ 0% {background-position: 0 0;}
100% {background-position: 100000% 0;}
}
#keyframes water {
0% {background-position: 0 0;}
100% {background-position: 100000% 0;}
}
Solved : http://jsfiddle.net/aradhayaKansal/7cgkj/3/ ! thanks to Mr. Alien
You are forgetting -webkit-animation: water 5000s linear infinite; as well as -webkit-animation: flow 5000s linear infinite; for webkit as still, chrome requires them, you can check this out
Demo
#waterfall {
/* Other properties */
-webkit-animation: flow 5000s linear infinite; /* <--- Here */
animation: flow 3s forwards linear normal;
}
And
#water {
/* Other properties */
-webkit-animation: water 5000s linear infinite; /* <---- here */
animation: water 5000s linear infinite;
}
Note: Just make sure you use -moz- as well...
Related
I am trying to fade out an element, keep that element faded out for, say, 5 seconds, then fade back in the element. I am trying to achieve this using only CSS and not jQuery.
Currently I have set two elements to start fading after 2 seconds, have a fade duration of 2 seconds and then reappear as soon as the duration ends.
Here's a fiddle.
And the code:
CSS:
.hideMe1{
animation:hideMe 0.5s 1;
-webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay:2s; /* Pause before fade */
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-fill-mode: backwards; /* End by showing the content */
}
.hideMe2{
animation:hideMe 0.5s 1;
-webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay:2.5s; /* Pause before fade */
-webkit-animation-delay:3s; /* Safari and Chrome */
-webkit-animation-fill-mode: backwards; /* End by showing the content */
}
#keyframes hideMe{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes hideMe{
from {opacity :1;}
to {opacity :0;}
}
HTML:
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
How can I make each element stay faded for 5 seconds (for example), before reappearing?
For achieving that effect, you would have to modify your keyframes like in the below snippet.
Set the animation-duration such that it is the total time for the fade-out + pause + fade-in. Here I have set the duration as 10s (2.5s for fade-out + 5s pause + 2.5s for fade-in).
Set the keyframe percentages to match the expected durations like below:
At 25% mark (which is nothing but 2.5s of 10s) change the opacity from 1 to 0.
A 5s pause period is nothing but 50% of 10s and so make the element hold its state till the 75% mark. It is critical that the 75% keyframe is also added (even though the element stays in the state) because otherwise the element would start fading-in from the 25% mark itself.
Starting at the 75% mark, make the element's opacity change gradually from 0 to 1 and thereby producing the fade-in effect.
Note: I have removed the vendor-prefixed versions of the properties to keep the demo simple and I've also removed the repetitive declaration of animation-fill-mode and -webkit-animation-fill-mode as at any point of time only one would be used by a browser. Webkit browsers would use the prefixed one as it appears last whereas other browsers would use the unprefixed one (and thus would result in cross-browser differences).
.hideMe1 {
animation: hideMe 10s 1;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.hideMe2 {
animation: hideMe 10s 1;
animation-fill-mode: forwards;
animation-delay: 2.5s;
}
#keyframes hideMe {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
You'll have to manually use the keyframes to time the animation. Take a look at this:
.hideMe1 {
animation: hideMe 5s 1;
-webkit-animation: hideMe 5s 1;
/* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay: 2s;
/* Pause before fade */
-webkit-animation-delay: 2s;
/* Safari and Chrome */
-webkit-animation-fill-mode: backwards;
/* End by showing the content */
}
.hideMe2 {
animation: hideMe 5s 1;
-webkit-animation: hideMe 5s 1;
/* Duration of fading and repetitions */
animation-fill-mode: forwards;
animation-delay: 2.5s;
/* Pause before fade */
-webkit-animation-delay: 3s;
/* Safari and Chrome */
-webkit-animation-fill-mode: backwards;
/* End by showing the content */
}
#keyframes hideMe {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1
}
}
<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>
#keyframes hideMe{
0% {opacity :1;}
10% {opacity :0;}
90% {opacity: 0;}
100% {opacity: 1}
}
Then set your animation speed to something like 7s.
I have the following CSS:
#-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
#-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 1s,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
}
.intro-text-1 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And the simple HTML code:
<div class="intro-text-0">Hello</div>
<div class="intro-text-1">Holla</div>
When I run it, "Hello" appear in 1 second and in 3 seconds instead of fading out for 1 second, it fades out instantly. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/
I tried switching it to this:
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And it works perfectly.
I must mention, that this bug appeared only in Chrome (Version 37.0.2062.120 Built on Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it out in Firefox and IE11 and there is no problem there.
Not really a bugfix though it could be a alternative.
Instead of animating a element with keyframes + animation on the elements itself why not put it all in the keyframe animation?
#keyframes AnimateMe {
0% { opacity:0%; }
80% { opacity:100%; }
100% { opacity:0%; }
}
I have experimented a bit and found a much simpler solution:
-webkit-animation: fade-in 1s linear 1001ms,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
Using 1001ms instead 1s (=1000ms) will not be noticed by a regular human eye :)
I have a small animation that is working in firefox, but not in webkit browsers. Maybe someone sees the mistake cause i've looked for an hour... It is part of a impress.js presentation, similar to prezi.
Thanks!
css:
#its.step.present h5{
display: inline-block;
position:absolute;
animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-webkit-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#-moz-keyframes aia2{
0%{
left:120px;
-moz-transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
-o-transform:scale(1) rotate(0deg);
transform:scale(1) rotate(0deg);
color: red;
}
90%{
left: 580px;
-moz-transform:scale(1) rotate(2000deg);
-webkit-transform:scale(1) rotate(2000deg);
-ms-transform:scale(1) rotate(2000deg);
-o-transform:scale(1) rotate(2000deg);
transform:scale(1) rotate(2000deg);
}
100%{
left: 580px;
}
}
html:
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>
<ul>
<li>Web Development,</li>
<li>Web Design,</li>
<li>Log<h5>o</h5> Design,</li>
<li>Web Marketing,</li>
</ul>
<ul class="doua">
<li><h6>e</h6> Commerce,</li>
<li>CMS (WP, J, D),</li>
<li>Cust m Apps</li>
<li>and others.</li>
</ul>
</p>
</div>
You have to put the general animation rule after the browser specific ones:
-webkit-animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
animation: aia2 5s linear infinite alternate; /* this comes last */
And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:
#-moz-keyframes aia2{
...
}
#-webkit-keyframes aia2{
...
}
#-o-keyframes aia2{
...
}
Chrome v43 dropped the -webkit- prefix for animation so if this worked before but not now, that's probably why.
One thing to check if you're developing in Firefox is Firefox will take an animation-name in quotes, but Chrome/Edge/Safari/Webkit will not.
Acceptable ONLY in Firefox:
animation-name: 'theAni';
Acceptable in all browsers (Chrome, Edge, Safari & Firefox):
animation-name: theAni;
for each property that you want add animation you need first determine its value then you can change it in keyframe.
here is a simple code that you can try it:
<!DOCTYPE html>
<head>
<style>
#forTest {
display: inline-block;
background-color: darkcyan;
width: 500px; /* here we determine the value of property that we want add animation */
height: 30px;
animation: a1;
animation-fill-mode: forwards;
animation-duration: 5s;
}
#keyframes a1{
to {
width: 100px;
}
}
</style>
</head>
<body>
<div id="forTest"></div>
</body>
</html>
I've been trying to do a looping scrolling animation for some comments using webkit, however whenever I apply the animation the effects seem to 'stack' up, and each element of the comment class will be slightly faster than the animation before. Here is my code:
CSS
.comment {
content:'';
-webkit-animation: movecomments 18s linear infinite;
-moz-animation: movecomments 18s linear infinite;
-o-animation: movecomments 18s linear infinite;
}
#-webkit-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
}
#-moz-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
}
#-o-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
HTML (Roughly goes like this, the actual comments are echoed with PHP)
<div class="comment">1</div>
<div class="comment">2</div>
<div class="comment">3</div>
<div class="comment">4</div>
You can check an example of it at my website, at the bottom of the page in the comment section.
This animation in Google Chrome uses 50% CPU! How can I optimize it?
Backgrouds (PNG24 with transparency) are 30KB and the size of 1440px to ~400px.
/* animation */
.animatedClouds1 {
background:
url('img/clouds1.png') repeat-x 0 20px;
}
.animatedClouds3 {
background:
url('img/clouds3.png') repeat-x 0 250px;
}
#-webkit-keyframes wind1 {
0% {background-position:0px 20px;}
100% {background-position:1440px 20px;}
}
#-webkit-keyframes wind3 {
0% {background-position:0px 250px;}
100% {background-position:1440px 250px;}
}
.animatedClouds1
{
-webkit-animation: wind1 80s linear infinite;
-moz-animation: wind1 80s linear infinite;
animation: wind1 80s linear infinite;
}
.animatedClouds3
{
-webkit-animation: wind3 160s linear infinite;
-moz-animation: wind3 160s linear infinite;
animation: wind3 160s linear infinite;
}
Classes .animatedClouds1 and .animatedClouds2 have a length of the browser window.
I can't create a sample page but the same problem I saw here http://goo.gl/lNB0D.
I would triage this:
Step 1: Remove the repeat-x and see the impact
Step 2: Change from background image to just regular images, see the impact
Step 3: Change from position to using a translate3D transform, see the impact
CSS Animations aren't the most CPU friendly, but they shouldn't be as bad as that