Smooth background animation - html

Is there a way to make this smoother? Or if anyone knows how to do this better I am all ears.
Here is what I have
html {
background: url(Images/landscape.jpeg)repeat-y;
background-size: 150%;
background-position: bottom;
-webkit-animation: backgroundScroll 190s linear infinite;
animation: backgroundScroll 190s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
#keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}


You might get better results setting the background image on an element and then moving the entire element with transform: translate:
#keyframes doScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-400);
}
}
Check out this older, but still relevant article.


I got it! I just needed to play with the interval speed. I slowed it down to around 85s and its a lot smoother. I was dragging it out to long.


You can do it like this:
html {
background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
background-size: 150%;
background-position: 0px 0px;
animation: animatedBackground 15s linear infinite;
-moz-animation: animatedBackground 15s linear infinite;
-webkit-animation: animatedBackground 15s linear infinite;
-ms-animation: animatedBackground 15s linear infinite;
-o-animation: animatedBackground 15s linear infinite;
}
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}

Related

How to flicker multiple sets of text one after another

I am mimicking the Windows 10 start up screen. For those of you familiar with the startup, I have the color transitions complete and one set of flickering text ("Hello!"). But I have no idea how to add new sets of text that will flicker following the ("Hello!") Text.
I've tried to research this but have had no success
The final question is how to flicker multiple sets of text one after another
.wrapper {
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 25s ease infinite;
-o-animation: rainbow 25s ease infinite;
animation: rainbow 25s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#Message {
color: #ffffff;
margin-top: 250px;
}
#keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-flicker {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
color: #ffffff;
margin-top: 250px;
}
#greet {
font-family: roboto;
font-weight: 150;
font-size: 30px;
}
<div class="wrapper">
<div class="animate-flicker" align="center">
<p id="greet">Hello!</h2>
</div>
</div>

I have translated your question in following requirements:
Show several words consecutively at the same spot.
Apply an animation on each word.
My animation displays an element 10 times for a short period of time and hides it again. animation-delay ensures that the animation on the second word starts after the first animation has finished and the animation on the third word starts after the second animation has finished.
To center words I positioned them absolute. This was necessary because I could not integrate display: inline; or display: none; in the keyframe animation (property display is not animatable).
span {
animation-name: flickerAnimation;
animation-duration: 0.1s;
animation-iteration-count: 10;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
#keyframes flickerAnimation {
0% {opacity: 1;}
80% {opacity: 1;}
81% {opacity: 0;}
100% {opacity: 0;}
}
<div class="wrapper">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>

Customer Loading Animation Keyframe/Background Position

I'm trying to create a custom loading spinner using keyframes and a spritesheet.
jsfiddle: http://jsfiddle.net/Flignats/aaaaaf6h/
My issue is that the spinner appears to be sliding (background position) and I'd like it to be stationary while spinning.
My CSS:
.hi {
width: 68px;
height: 68px;
background-image: url("data:image/png;base64, ... );
-webkit-animation: play 1s steps(23) infinite;
-moz-animation: play 1s steps(23) infinite;
-ms-animation: play 1s steps(23) infinite;
-o-animation: play 1s steps(23) infinite;
animation: play 1s steps(23) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}

CSS3 Background Animation Moving Content

I have the following code:
Here's the CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
Which is for the following HTML:
<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>
I am trying to animate the body background to be clouds moving, but the entire page is scrolling, along with the background. For example, if you were to run the above code, the text "This content is moving, why?" would be moving. How can I fix this?

I show you an example working with your code:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>

Image Overlap and animation

Am trying to animate an image (that uses class="under") and is overlapped by a still image (that uses class="over"). Animation effect works fine for the lower image with Firefox and IE-9 browsers, whereas Chrome does not show animation. Chrome shows both still images.
Any solution please.
.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 1000px;
height: 160px;
background-image: url(images/img7.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
}
Thanks
Anand

Try #-webkit-keyframes animatedBackground
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}

How to get multiple rotating background cover with css / Full screen slideshow

I want to have multiple background images using HTML and CSS (as those are the only languages I have learned so far).
The best result I got for background cover is from id="full-bg". Now how do I make it to multiple background cover photo at the same time rotating(changing in every lets say 5 sec).

Try this JSfiddle
This code only uses css and rotates trough the backgrounds you add.
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
animation-duration: 5s;
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes fade-bg {
0% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
51% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
100% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
I hope this helps!

Here is a cross-browser solution:
body{
-webkit-animation: change 5s linear infinite;
-moz-animation: change 5s linear infinite;
-ms-animation: change 5s linear infinite;
-o-animation: change 5s linear infinite;
animation: change 5s linear infinite;
}
#-webkit-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-moz-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-ms-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-o-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}