When scrolling to the top or bottom in a webpage the background image ends and there is white "behind" the image. The background fills the entire webpage, that is not the issue.
How do i make the background image continue past the viewport?
I have a color gradiant that is animated with css like this:
body {
background: linear-gradient(270deg, #d20000, #004261) no-repeat center center fixed;
background-size: 250% 250%;
-webkit-animation: bgcolor 10s ease infinite;
-moz-animation: bgcolor 10s ease infinite;
animation: bgcolor 10s ease infinite;
}
#-webkit-keyframes bgcolor {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
#-moz-keyframes bgcolor {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
#keyframes bgcolor {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
Thank you!
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 somewhat achieved infinite scrolling background using background position property.But the problem is i've given the value background-position:0 200px
in the keyframes,after moving downwards to 200px the background image restarts its movement from the beginning.I don't want that to happen,it should scroll infinitely without any hiccups. how to do it?
here is the code.
html:
<div id="cloud-scroll"></div>
css:
#cloud-scroll {
width: 275px;
height: 183px;
background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png);
background-size:cover;
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
You should use background-repeat and set your background image such that when it's repeated vertically ( or horizontally, if that's what you are doing ), it is seamless.
Your div is 183px tall, so you should use 183px in your animation.
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 183px;}
}
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