This question already has answers here:
Background-position not working with CSS animation and linear gradient
(2 answers)
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 4 years ago.
I want to move my background using css horizontally.
I've looked at this demo, but they're using an actual image. I want to be able to use rgba / linear-gradient instead.
This is my code:
.chat {
width: 490px;
float: left;
background: #F2F5F8;
color: #434651;
position:absolute;
overflow:hidden;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
.chat .chat-header {
/* padding: 20px; */
border-bottom: 2px solid white;
background-image: linear-gradient(135deg, #FF5572, #FF7555);
width:1000px; /*make bigger in order to move */
overflow:hidden;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 4s linear infinite;
}
<div class="chat">
<div class="chat-header clearfix">
<div class="chat-about">
hi
</div>
</div>
</div>
I want it to animate in the same way as in the demo. How would i achieve that?
You can use background position to translate it through the image background like the example..
.chat {
width: 490px;
float: left;
background: #F2F5F8;
color: #434651;
position:absolute;
overflow:hidden;
}
#keyframes animatedBackground {
0% {
background-position: 0% 0%
}
50% {
background-position: 0% 100%
}
100% {
background-position: 0% 0%
}
}
.chat .chat-header {
/* padding: 20px; */
border-bottom: 2px solid white;
background-image: linear-gradient(180deg, #FF5572, blue, #FF5572);
width:1000px; /*make bigger in order to move */
overflow:hidden;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 4s linear infinite;
margin:0;
height:400px;
background-size: 100% 400%;
}
<div class="chat">
<div class="chat-header clearfix">
<div class="chat-about">
hi
</div>
</div>
</div>
.chat {
background: linear-gradient(134deg, #ff5572, #ff7555);
background-size: 400% 400%;
animation: Move 4s ease infinite;
}
#keyframes Move {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
There's a great tool for playing around with gradient animations at https://www.gradient-animator.com/
Related
I can't seem to make this animation move forever without adding more dots in span.
I would like the amount of dots not to be dependent on the "loading-dots" class, as it is adding more dots increases the duration but its a pain. Could it be possible to have a single dot but animate it forever. I like the ability to change the speed and direction.
Here's the CodePen
* {
box-sizing: border-box;
}
body {
padding: 50px;
background: white;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 20px 0px 20px;
}
.loading-container {
overflow: hidden;
float: left;
width: 200px;
}
.loading-dots {
display: inline-block;
animation-name: loading-dots;
animation-duration: 5s;
animation-timing-function: linear;
font-size: 50px;
position: relative;
top: -27px;
color: rgba(blue, 1);
font-family: sans-serif;
white-space: no-wrap;
}
.loading-title {
overflow: display;
position: relative;
font-size: 30px;
top: 10px;
margin-right: 10px;
font-family: monospace;
color: rgba(white, 1);
float: left;
}
#keyframes loading-dots {
0% {
transform: translateX(-600px);
}
100% {
transform: translateX(0px);
}
}
<div class="container">
<span class="loading-title"></span>
<div class="loading-container">
<span class="loading-dots">.................
</span>
</div>
</div>
You can do this with a simple background where it will be easy to control the animation and also the dimension of your dots:
.dots {
height:5px; /*to control the overall height*/
width:200px; /*to control the overall width*/
margin:50px;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px, /*5px of transparent*/
blue 5px,blue 10px); /*then 5px of blue */
background-size:200% 100%;
animation:change 3s linear infinite;
}
#keyframes change{
to {
background-position:right;
}
}
<div class="dots"></div>
To change the direction you simply change the position:
.dots {
height:5px;
width:200px;
margin:50px;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
background-size:200% 100%;
background-position:right;
animation:change 3s linear infinite;
}
#keyframes change{
to {
background-position:left;
}
}
<div class="dots"></div>
You can check this for more details about the different values used: Using percentage values with background-position on a linear gradient
Another idea using animation on transform :
.dots {
height:5px;
width:200px;
margin:50px;
position:relative;
overflow:hidden;
}
.dots::before {
content:"";
position:absolute;
top:0;
left:0;
right:-100%;
bottom:0;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
animation:change 3s linear infinite;
}
#keyframes change{
to {
transform:translateX(-50%);
}
}
<div class="dots"></div>
Changing the direction:
.dots {
height:5px;
width:200px;
margin:50px;
position:relative;
overflow:hidden;
}
.dots::before {
content:"";
position:absolute;
top:0;
left:-100%;
right:0;
bottom:0;
background-image:
repeating-linear-gradient(to right,
transparent,transparent 5px,
blue 5px,blue 10px);
animation:change 3s linear infinite;
}
#keyframes change{
to {
transform:translateX(50%);
}
}
<div class="dots"></div>
Reduce the negative pixel margin. -600px is pretty excessive for 16 dots.
#keyframes loading-dots {
0% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}
I am working on creating a Facebook content placeholder with the shimmer effect. I just want to animate the background property (or applying the linear gradient from top left to bottom right,) from the top left and end to the bottom right.
.Box {
height: 100px;
width: 100px;
margin: 16px;
background: #f6f7f8;
border-radius: 50%;
}
.Shine {
display: inline-block;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-repeat: no-repeat;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 10px 0;
}
}
<div class="Shine">
<div class="Box"> </div>
</div>
Now it's growing linearly from left to right.
Youn need to adjust the gradient then consider percentage value to have a better effect:
.Box {
height: 100px;
width: 100px;
margin: 16px;
background: #f6f7f8;
border-radius: 50%;
}
.Shine {
display: inline-block;
background:
linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
background-size:200% 200%;
background-repeat: no-repeat;
animation:placeholderShimmer 2s infinite linear;
}
#keyframes placeholderShimmer {
0% {
background-position:100% 100%; /*OR bottom right*/
}
100% {
background-position:0 0; /*OR top left*/
}
}
<div class="Shine">
<div class="Box"></div>
</div>
The trick is that the background will be twice as big as the container (200%x200%) with a diagonal direction and we make the coloration in the middle (around 50%). Then we simply slide this big background from top left to bottom right.
Related question for more details: Using percentage values with background-position on a linear-gradient
Is there an easy way, using only CSS, to enable background image slideshow?
I have the background image defined as fullscreen and responsive inside the html property in CSS and would like it to have a simple transition effect. The CSS looks like this:
html {
background: url(slike/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Do I need to define it in html and make a new CSS class? The only 'problem' is that the backgrounds need to be fullscreen and responsive.
You can do so by using the container div like this
html,body {
width:100%;
height:100%;
}
body {
margin: 0;
}
.container
{
width:100%;
height:100%;
}
#slideshow {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width:100%;
height:100%;
display: inline-block;
}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
position: absolute;
left: 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: inline-block;
text-align: center;
}
span{
border: 1px solid #000;
border-radius: 3px;
box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3);
font-size:4em;
background-color:#fff
}
.elemnt {
animation: xfade 16s 8s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
.elemnt1 {
animation: xfade 16s 6s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/sahara-desert-by-ellie-1024x683.jpg');
}
.elemnt2 {
animation: xfade 16s 2s infinite;
background-image: url('https://pbs.twimg.com/media/C4JYsjcWYAAixfx.jpg');
}
.elemnt3 {
animation: xfade 16s 0s infinite;
background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg');
}
#keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade1{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade2{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
#keyframes xfade3{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
<div class="container">
<div id="slideshow">
<div class="elemnt"><span>Text Slider 1</span></div>
<div class="elemnt1"><span>Text Slider 2</span></div>
<div class="elemnt2"><span>Text Slider 3</span></div>
<div class="elemnt3"><span>Text Slider 4</span></div>
</div>
</div>
Try this now the slider is using only css you can modify the timing, by changing the animation duration
I have found this fiddle, but the animation works only if I click and hold.
#parent {
height: 200px;
width: 400px;
background-color: lightgray;
}
#circle {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
height: 200px;
width: 400px;
transition: .3s ease-in;
}
#parent:active #circle {
background-size: 600px 600px;
}
<div id="parent">
<div id="circle"></div>
</div>
Would it be possible to make the animation to load when the page loads?
Just want some background load in animation similarly to Android Lollipop ripple / Firefox OS for TV.
You can use CSS3 animation for the transition to start automatically.
Learn more about animation here:
https://css-tricks.com/almanac/properties/a/animation/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
http://www.w3schools.com/css/css3_animations.asp
Updated fiddle: Fiddle
Snippet:
#parent {
height: 200px;
width: 400px;
background-color: lightgray;
}
#circle {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
height: 200px;
width: 400px;
/*transition: .3s ease-in;*/
animation: example 1s ease-in infinite;
}
#keyframes example {
0% {
background-size: 0px 0px;
}
50% {
background-size: 600px 600px;
}
100% {
background-size: 0px 0px;
}
}
<div id="parent">
<div id="circle"></div>
</div>
Say you are trying to animate a tilable background like this:
.container {
width: 160px;
height: 91px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: contain;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
#-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
#keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
<div class="container">
<textarea class="bg"></textarea>
</div>
As soon as you change the dimensions of the container, the looping animation breaks!
Is there any way to make this responsive without JS?
The problem is that, to make it responsive, you need to set the animated background-position using percentages.
But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won't move it).
The only way that I have found to manage this is moving the image to a pseudo element, and moving it. To keep the continuity, though, we will need two pseudo elements.
But that won't work on a textarea.
You didn't said anything about textarea being a requirement, so I am posting this. To show that it works on resize, hover it.
.container {
width: 160px;
height: 100px;
position: relative;
border: solid 1px black;
display: inline-block;
}
.container:nth-child(2) {
width: 220px;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bg:before, .bg:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://i.stack.imgur.com/wBHey.png);
background-size: 100%;
animation: move 2s infinite linear;
}
.bg:before {
right: 100%;
}
#keyframes move {
from {transform: translateX( 0%);}
to {transform: translateX(100%);}
}
<div class="container">
<div class="bg"></div>
</div>
<div class="container">
<div class="bg"></div>
</div>
I was able to make it work by making the background twice as big.
I know this isn't the perfect solution, but maybe you can do a trick with the image size or something to make it look the way you wanted it to.
.container {width: 160px;height: 91px;}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: 200%;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
#-webkit-keyframes displace {
from { background-position: left center;
} to { background-position: 200% center; }
}
#keyframes displace {
from { background-position: left center;
} to { background-position: 200% center; }
}
<div class="container"><textarea class="bg"></textarea></div>
The problem you have is with the height resizing and your different settings. To get it to work with your actual settings, the displace would have to be 2x the height of the image (since the image has a ration of 2:1). I don't think you can do only by css.
But you have different options. I'm not sure exactly which part of you display you want to keep, so here are three ways to get your translation working on resize. None have exactly your settings, because the ones you have make it hard (impossible?) to set the proper displacement. Since you're stretching the width depending on the height, it's hard to follow. Via JS it would be easy, but css has limited access to these values.
The solutions proposed keep the height constant so you can keep your displace value constant.
First one, the background-size is the size of the container in px.
Second solution, you resize textarea only on x axis.
Third you repeat on y axis and keep height and width fixed.
There are probably other workarounds that are maybe more suited to your specific needs.
.container {
width: 160px;
height: 80px;
margin: 10px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: 160px 80px;
padding: 0px;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
.bg2 {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: contain;
padding: 0px;
resize: horizontal;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
.bg3 {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left center;
background-size: 160px 80px;
padding: 0px;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
#-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
#-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
<div class="container">
<textarea class="bg"></textarea>
</div>
<div class="container">
<textarea class="bg2"></textarea>
</div>
<div class="container">
<textarea class="bg3"></textarea>
</div>
This is similar to Ilpo's answer, except it doesn't resize the image (background-size: auto;). The animation is smooth throughout, regardless of container size.
The downside is that the width (200px) of the image needs to be known beforehand.
Since you said tilable, and since this image looks to be tilable in both directions, I also made it repeat in both dimensions. As a result, your textarea is filled with the tiled background image, animated to scroll horizontally. If you only want to tile in 1 direction, you can change repeat back to repeat-x and change the vertical position from top to whatever you need.
.container {width: 160px;height: 91px;}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left top;
background-size: auto;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
#-webkit-keyframes displace {
from { background-position: 0px top; }
to { background-position: 200px top; }
}
#keyframes displace {
from { background-position: 0px top; }
to { background-position: 200px top; }
}
<div class="container"><textarea class="bg"></textarea></div>
For each background-position: 200px bottom; you need to add 1second for example if you want add 2S, you add another 200px so you
make it background-position: 400px bottom; I think.
Here is the code:
.container {
width: 160px;
height: 91px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) fixed;
-webkit-animation: displace 1s linear infinite;
animation: displace 1s linear infinite;
}
#-webkit-keyframes displace {
from { background-position: 0 bottom; }
to { background-position: 200px bottom; }
}
#keyframes displace {
from { background-position: 0 bottom; }
to { background-position: 200px bottom;}
}
<div class="container">
<textarea class="bg"></textarea>
</div>
I hope it works for your case, Let me know if you have any question.
.container {
border: 1px solid black;
display: inline-block;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
background-size: 160px 100%;
}
.bg {
float: left;
border: 0;
margin: 10px;
width: 160px;
height: 91px;
background-color: rgba(255, 255, 255, .5);
}
#-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
#keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
<div class="container">
<textarea class="bg"></textarea>
</div>