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.
Related
This might just be a matter of it not being possible but here is my CodePen link https://codepen.io/Spectral/pen/QgMdbM?editors=1100
I can't make the gradient animate, am I doing something wrong or is this just not possible?
code:
<h1 class='knockout'>This text should be animated!</h1>
body{background:#fdf}
.knockout{
margin:50px 0 0 0 auto;
font-family:sans-serif;
color:blue;
/* gradient*/
background: linear-gradient(4deg, #4a6bbd, #b65181, #3c636c);
/* animation */
-webkit-animation: gradientAnimation 4s ease infinite;
-moz-animation: gradientAnimation 4s ease infinite;
-o-animation: gradientAnimation 4s ease infinite;
animation: gradientAnimation 4s ease infinite;
#-webkit-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-moz-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-o-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
/* knockout*/
background-size:cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
font-size:20vw;
text-align:center;
/* stroke*/
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #010;
}
The #keyframes {} block of code must be written outside the .knockout {} block of code, rather than within it. Here is an example of the background gradient working:
https://codepen.io/anon/pen/PjJoym?editors=1100
(I removed the #-webkit, #-moz, #-o code to simplify this demonstration)
I don't know if this is exactly what you were looking for, and its a little complicated, but I just added your code to an existing sample of mine. Maybe you could do something with it, I kinda gave up on it.
https://codepen.io/MikeIke/pen/xrgvEW
<div class="header">
<h1>Animated Fixed Knockout Text Example(Work In Progress)</h1>
<h3>Scroll down to see</h3>
</div>
<div id="profile">
<div class="section">
<div id="knock1">
<div id="knock2">
<div class="sectionTitle" id="profileTitle">TEXT</div>
</div>
</div>
</div>
</div>
Please help me understand why the following CSS animation does not produce a color switch back and forth between red and blue.
div {animation: colorswitch 1s step-end infinite}
#keyframes colorswitch {0% {color:red} 100% {color:blue}}
<div>text</div>
As a timing function I specify step-end which is supposed to directly jump to the final state. But it does not work.
Here is a solution of color switch animation.
div {
animation: colorswitch 1s step-end infinite;
}
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
}
demo
Still trying to understand why it's behave like this.
Why 50% works?
It also work for-
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:blue}
}
Add for
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:red}
}
Ah...I think I see the issue. I think this is what you were after.
div {
font-size: 72px;
animation: colorswitch 1s step-end infinite;
}
#keyframes colorswitch {
0% {
color: red;
}
50% {
color: blue;
}
}
<div>
text</div>
I have this HTML:
<div id="images_container" style="z-index: 900;">
<div id="images">
<img src="images/cust.png">
<img src="images/cust.png">
<img src="images/cust.png">
</div>
</div>
I want to make the images move from the right of the screen to the left using the animation CSS3.
I got it working:
scrolls the first image.
starts showing the second image (by the way, the image is the same image 3 times).
the first image almost finishes scrolling.
the whole div sort of "jumps" and loads the first image from the beginning.
It doesn't look aesthetic at all.
This is the CSS I have so far:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#-moz-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#-ms-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#first #images_container {
position: absolute;
height: 60px;
width: 100%;
overflow: hidden;
margin: -67px auto 0;
z-index: 900;
}
#first #images {
-webkit-animation: ticker 45s linear infinite;
-moz-animation: ticker 45s linear infinite;
-ms-animation: ticker 45s linear infinite;
animation: ticker 45s linear infinite;
width: 10000px;
}
More relevant info about the images: they are 3294px width each.
Update:
When I change this:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
to this:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000;}
}
All the images run well, but the speed of the marquee increases.
Any solution for that?
Update Final Answer:
I changed the seconds from 45 to 160:
#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}
Solved my problem :)
Because the width of the images is high, I gave it a big numger for the 'margin-left' on the keyframes.
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#-moz-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#-ms-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
Because the image is really long, 45s wont be slow enough (for me), so I gave it a high number. like 160s.
#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}
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...
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