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
Related
I have two boxes, each have :hover selector which transition linear-gradient background image.
linear gradient to top works perfectly fine with transition (code below).
.box7:hover{
color: #FFF;
background-image: linear-gradient(to top, #000 50%, #fff 50%);
background-position: 0% 100%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
but I am having problems with linear gradient to bottom, transition effect doesn't seems to work (code below).
.box2:hover{
color: #FFF;
background-image: linear-gradient(to bottom, #000 50%, #fff 50%);
background-position: 100% 0%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
Any help would be appreciated.
Below is the link to check (hover on all boxes)
https://conrad93.github.io/linear-gradient-sliding-effect/boxbox.html
The problem is that your styles are not applied when you aren't hovering over the element. The solution is therefore to apply these styles to the default state of the element as well. Something like this:
// html
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
</div>
// CSS
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: solid 1px red;
margin: 5px;
transition: all .4s ease;
background-color: lightgoldenrodyellow;
}
.box-1 {
background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 0%;
background-size: 100% 200%;
}
.box-1:hover {
background-position: 0% 100%;
}
.box-2 {
background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 100% 200%;
}
.box-2:hover {
background-position: 0% -200%;
}
.box-3 {
background-color: crimson;
background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-3:hover {
background-position: 0% -100%;
}
.box-4 {
background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-4:hover {
background-position: 0% 100%;
}
Within the declaration block for the hover state, you only need to declare those properties that are changing, in this case background-position.
Here is a working example on JsFiddle.
You probably also want the diagonal gradient to animate up from the bottom left of the element. This is a little tricky to do, but you can see it working in the example. To understand why it works, you need to understand what the x and y values in the background-position property mean. MDN docs are a good place to learn.
I'm trying to create an animated background fill effect (still learning animation) but the fill color jumps quickly before it reaches the end of the div. What's the issue and how to fix it? Thanks in advance.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
animation: makeItfadeIn 3s 1s;
animation-fill-mode:forwards;
}
#-webkit-keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
#keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
<div class="outer">
<div class="button">
</div>
</div>
Background inside the animation is the culprit. You simply need to animate the position from right to left:
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 0);
background-size: 200% 100%;
background-position: right;
animation: makeItfadeIn 3s 1s forwards;
}
#keyframes makeItfadeIn {
100% {
background-position: left;
}
}
<div class="outer">
<div class="button">
</div>
</div>
Related to get more details: Using percentage values with background-position on a linear-gradient
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/
I was earlier having problem with gradiens in firefox. I then placed the background: -moz-linear-gradient(left,red,blue); in the DIV instead of #keyframes changeSizeAndColor{} Now my problem is that it doesn´t change from blue to red instead it´s (red and blue ) all the time.
here the code:
#fifth-div{
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
font-family: helvetica;
font-size: 5px;
background-color: blue;
width: 200px;
height: 200px;
animation-name: changeSizeAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
-webkit-animation: changeSizeAndColor 5s infinite; /* Chrome, Safari, Opera */
animation: changeSizeAndColor 5s infinite;
background: -webkit-gradient();
background: -moz-linear-gradient(left,red,blue);
This(below) is how I originaly started out. Didn´t got my anywhere att all. Then I added as said above this line of code: background: -moz-linear-gradient(left, red, blue); in the css(in the div) and I got the radient working but not the shifting from only blue to radient(blue&red)(It just shows upp radient without the shifting from only blue to radient(red&blue) as in the other browsers.
#keyframes changeSizeAndColor {
from {
width: 200px;
height: 200px;
background-color: blue;
font-size: 5px;
}
to {
width: 300px;
height: 300px;
font-size: 25px;
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: repeating-linear-gradient(right, red, blue);
background image: -moz-linear-gradient(left, red, blue);
}
The most reliable way to change backgrounds, and the only working for all the browsers, is modifyng the position.
To apply this to your case, set a gradient in front of the stripped one, that changes from blue to transparent.
then , animate the position of this layer
#test {
width: 100px;
height: 100px;
animation: gradient 2s infinite;
background-image: linear-gradient(to top, blue, transparent),
repeating-linear-gradient(red, lightgreen 20%);
background-size: 100% 2000%, 100% 100%;
background-position: top center, top center;
}
#keyframes gradient {
0% {background-position: bottom center, top center;}
100% {background-position: top center, top center;}
}
<div id="test"></div>
I am trying to change the background-color of an element on hover by using CSS transitions. I want to do this by having it scroll up from the bottom. I can fade the background in using this, but I would like it to slide up:
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
transition: background-color 0.5s linear;
One other thought, would it be better to scroll up a separate element with the background applied to it?
In order to slide the background color up you would need to use a background image, or a gradient of some sort, while gradually adjusting the background-position:
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.box:hover {
background-position: 0 -100%;
}
<div class="box"></div>
An extension to #Sampson answer where I will consider more friendly values easier to understand:
.box {
width: 100px;
height: 100px;
display:inline-block;
background-size: 200% 200%;
transition: background-position 1s;
}
.to-top{
background-image: linear-gradient(to top, red 50%, black 0);
background-position: top;
}
.to-top:hover {
background-position: bottom;
}
.to-bottom{
background-image: linear-gradient(to bottom, red 50%, black 0);
background-position: bottom;
}
.to-bottom:hover {
background-position: top;
}
.to-left{
background-image: linear-gradient(to left, red 50%, black 0);
background-position: left;
}
.to-left:hover {
background-position: right;
}
.to-right{
background-image: linear-gradient(to right, red 50%, black 0);
background-position: right;
}
.to-right:hover {
background-position: left;
}
<div class="box to-top"></div>
<div class="box to-bottom"></div>
<div class="box to-left"></div>
<div class="box to-right"></div>
Here is more fancy transitions:
.box {
width: 100px;
height: 100px;
display:inline-block;
transition: 1s;
}
.to-center{
background:
linear-gradient(black,black) no-repeat,
red;
background-size: 100% 100%;
background-position:center;
}
.to-center:hover {
background-size: 0% 100%; /* Or 100% 0% */
}
.from-center{
background:
linear-gradient(red,red) no-repeat,
black;
background-size: 0% 100%; /* Or 100% 0% */
background-position:center;
}
.from-center:hover {
background-size: 100% 100%;
}
.diagonal-right{
background-image:linear-gradient(to bottom right,red 49.5%,black 50%);
background-size: 200% 200%;
background-position:bottom right;
}
.diagonal-right:hover {
background-position:top left;
}
.diagonal-left{
background-image:linear-gradient(to bottom left,red 49.5%,black 50%);
background-size: 200% 200%;
background-position:bottom left;
}
.diagonal-left:hover {
background-position:top right;
}
<div class="box to-center"></div>
<div class="box from-center"></div>
<div class="box diagonal-right"></div>
<div class="box diagonal-left"></div>
Related question to get more details about how background-position works combined with background-size: Using percentage values with background-position on a linear-gradient
Other ideas using circular shapes:
.box {
width: 100px;
height: 100px;
display:inline-block;
transition: 1s;
}
.to-center{
background:
radial-gradient(farthest-side,black 98%,transparent) no-repeat,
red;
background-size: 150% 150%;
background-position:center;
}
.to-center:hover {
background-size: 0% 0%;
}
.from-center{
background:
radial-gradient(farthest-side,red 98%,transparent) no-repeat,
black;
background-size: 0% 0%;
background-position:center;
}
.from-center:hover {
background-size: 150% 150%;
}
.diagonal-right{
background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
black;
background-size: 300% 300%;
background-position:bottom right;
}
.diagonal-right:hover {
background-position:center;
}
.to-left{
background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
black;
background-size: 400% 400%;
background-position:left;
}
.to-left:hover {
background-position:center;
}
<div class="box to-center"></div>
<div class="box from-center"></div>
<div class="box diagonal-right"></div>
<div class="box to-left"></div>
Related: How to animate a radial-gradient using CSS?