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;}
}
Related
I am new to programming. Please forgive me if this is a very basic question.
I am working on a small project of designing a very simple personal website using HTML and CSS. On the website, I want the background colors of the main website to fade into one another after some time (say, to transition from light blue to light green to light yellow after 15s each). Is there a way I can do this using CSS?
body {
background:lightblue;
animation:changebg infinite 15s;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
Do this instead
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
If this doesn't work, you can mess around with the timing.
You can try the following code:
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg {
0% { background:lightblue; }
33% { background:lightgreen; }
66% { background:lightyellow; }
100% { background:lightblue; }
}
Pretty much the website's background will start at light blue, and when it reaches 33% of 60s (for e.g.) it will change to light green, etc.
And when it reaches 100% at 60s time, the "linear infinite alternate" will make sure it repeats.
body {
background: red;
animation: changebg 5s infinite;
//adding infinte will make your animation run in a loop
}
#keyframes changebg
/* Firefox */
{
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: red;
}
}
Just an addition to the previous answer
Keep on learning.
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!
If you look at my code and run it.
#-webkit-keyframes circle {
from { transform:rotate(0deg); }
to { transform:rotate(180deg); }
}
#-webkit-keyframes inner-circle {
from { transform:rotate(0deg); }
to { transform:rotate(-180deg); }
}
#one {
position: absolute;
left: 500px;
top: 200px;
width:100px;
height:100px;
border-radius: 50px;
background-color: #000000;
}
#two {
width:100px;
height:100px;
margin: 0px auto 0;
color:orange;
font-size:100px;
line-height:1;
transform-origin:50% 200px;
}
#one:hover > div {
animation: circle 1s linear infinite;
-webkit-animation: circle 1s linear infinite;
}
#one:hover > div > div {
animation: inner-circle 1s linear infinite;
-webkit-animation: inner-circle 1s linear infinite;
}
</style>
<div id="one">
<div id="two"><div id="three">☻</div></div>
</div>
you will notice that the smile face keeps on looping the animation of rotating 180deg. I don't want this. I only want it to do the animation once every time I hover over the black circle. How do I do this?
If you don't want the animation to occur infinitely, remove infinite from the animation shorthand.
In addition, you will also need to add forwards in order to to prevent the animation from resetting each time. When adding forwards to the animation shorthand, you are essentially changing the property animation-fill-mode from the default value of none to forwards.
From MDN:
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
#one:hover > div {
animation: circle 1s linear forwards;
-webkit-animation: circle 1s linear forwards;
}
#one:hover > div > div {
animation: inner-circle 1s linear forwards;
-webkit-animation: inner-circle 1s linear forwards;
}
Change all the infinite values to the amount of times you want the animation to loop. In your case it will be once so you want to change infinite to 1.
This is to add a spinning/loading icon for images as they load.
The existing code I'm using calls up an animated .gif image as a background image "behind" an image thumbnail, so the loading icon is visible until the thumbnail loads on top. But I want to replace the .gif with a higher quality .png and add CSS to make it rotate. It's a much cleaner look, but I don't know how or if I can add CSS style to background: url(img/loading.png)
Here's the original HTML code:
<div style="position: absolute; display: block; background: url(img/loading.png) no-repeat center center; top: 0px; left: 0px; width: 25%; height:25%;">
I want to add this CSS code to the .png to make it rotate:
.loading {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform:rotate(360deg);
}
}
#keyframes spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
What's the best way to combine these to make my background .png image rotate?
You can animate the div with the background, you just need to add the loading class to it and with a separate class to add the other styles to it like the background url, width, height, position etc...
.load-style {
height: 64px;
width: 64px;
background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
background-size: 100%;
position: absolute;
}
.loading {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loading load-style"></div>
You didn't add the class which your animating to the HTML. In your CSS you have a class called "loading" but the HTML doesn't know what to animate. In your div before the style="" tag add class="loading" and it will work, other than that your CSS works.
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