I would like to animate the background of my div. The background position should move from left-top, to right-bottom. For some reason, nothing happens. And I have no idea why
.test {
width: 50%;
height: 250px;
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
background-size: 100% 100%;
animation: moving-gradient 1s infinite;
}
#keyframes moving-gradient {
0% {
background-position: left top;
}
100% {
background-position: right bottom;
}
}
JSFiddle:
http://jsfiddle.net/uLedmk5k/
You have to use fixed values for your background animation to work :
#keyframes moving-gradient {
0% {
background-position: 0,0;
}
100% {
background-position: 200px 250px, 200px 250px;
}
}
So you will have to set a fixed width to your element too :
.test {
width: 200px;
Fiddle
Edit from comments
if you set your width to viewport units it will work too :
.test {
width: 50vw;
height: 250px;
and in animation
100% {
background-position: 50vw 250px, 50vw 250px;
}
Fiddle
I'm not sure why but looking to computed tab in Firebug shows that viewport units are actually interpreted as fixed px values
Instead of moving the background image, have you tried moving the element?
translate is a very efficient and smooth (because of its anti-aliasing) way to move elements on screen, plus you can use percentages with ease.
An example Fiddle might help explain?
Although I may have completely misunderstood what you're trying to achieve.
A stupid way but works
http://jsfiddle.net/uLedmk5k/9/
Use 4 div and translate
HTML
<div class="test">
<div class="bg"></div><div class="bg"></div>
</div>
CSS
.test {
width: 50%;
height: 250px;
overflow: hidden;
}
.bg {
white-space: nowrap;
width: 100%;
height: 100%;
animation: moving-gradient 1s infinite;
-webkit-animation: moving-gradient 1s infinite;
}
.bg::after, .bg::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
background-size: 100% 100%;
}
#keyframes moving-gradient {
0% {
transform: translate(-100%, -100%);
}
100% {
transform: translate(0, 0);
}
}
#-webkit-keyframes moving-gradient {
0% {
transform: translate(-100%, -100%);
}
100% {
transform: translate(0, 0);
}
}
Related
trying to change background gradient smoothly from gold-orange - to orange-gold and vice versa
problem - colors are changed suddenly, jumping from one to another
pls help
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange);
animation: back infinite;
animation-duration: 7s;
}
#keyframes back {
0% {
background: linear-gradient(to right, gold, orange);
}
50% {
background: linear-gradient(to left, gold, orange);
}
100% {
background: linear-gradient(to right, gold, orange);
}
}
<div class='box'></div>
You can increase background-size and use background-position for the animation
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange, gold);
animation: back ease infinite;
animation-duration: 7s;
background-size: 200% 200%;
}
#keyframes back {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
<div class='box'></div>
I applied a drop-shadow filter on my clip-path, while the shadow works well on white background, it does not work at all on a darker one (example below) -
It just looks like some weird lines instead of a blurred shadow, The shadow is a bit darker then the background, making the shadow completly black makes it work at the start of the shadow but to the end it has these lines once again.
The code:
body {
margin: 0;
overflow-x: hidden;
height: 2000px;
}
body .headerText {
position: absolute;
top: 50vh;
left: 40vw;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 8vh;
z-index: 10;
color: white;
mix-blend-mode: exclusion;
}
body .headerWrap {
position: fixed;
filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
-webkit-filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
}
body .headerWrap header {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #2e2e2e;
-webkit-clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
-webkit-animation: rotate 1s 1;
animation: rotate 1s 1;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: calc(var(--scroll) * -3s);
animation-delay: calc(var(--scroll) * -3s);
}
#-webkit-keyframes rotate {
to {
-webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
}
}
#keyframes rotate {
to {
-webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
}
}
body .landing {
width: 100vw;
height: 100vh;
background-color: white;
}
body .content {
width: 100vw;
height: 200vh;
background-color: #424242;
}
<html lang="en">
<head>
</head>
<body>
<div class="headerText"><h1>Hello bruddas</h1></div>
<div class="headerWrap">
<header></header>
</div>
<script>
window.addEventListener('scroll', () => {
document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);
</script>
<div class="landing"></div>
<div class="content"></div>
</body>
Answer
The shadow works fine on both colors.
You can barely (or not...) see it, but it's there.
The lines are in fact the shadow.
The problem here, is the low amount of colors rendered by the screen due to the low contrast between the darkest and lightest colors (for the dark one).
Screens have a limited amount of colors. It also depends on the screen type and settings, sometimes you can easily see it (and it's ugly), sometimes you can barely notice that behavior (you just see a smooth gradient).
Example
Here is an example:
Notice I used the same shadow for both sides.
You should be able to see the lines on darker tones (the top of the left side, and all the right side). Maybe you cannot see the lines at all, again, it depends on the output device and settings.
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s ease infinite;
}
#-webkit-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#-moz-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>
I am trying to make a progress bar and using css3 transition to give it a fill effect.
jsfiddle here
When I give it a fixed size, it works as usual, but Problem is when I set the background-size:100% the fill becomes stretch.
How can I create fill effect using background-size:100%?
Progressbar1 is with fixed width and background-size
Progressbar2 is with 100% width and background-size
/* PROGRESS */
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
animation-duration: 3s;
animation-name: width;
background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px);
background-size: 24em 0.25em;
height: 100%;
position: relative;
width:100%
}
.progress2 {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 100%;
}
.progress-bar2 {
animation-duration: 3s;
animation-name: width;
background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px);
background-size: 100% 0.25em;
height: 100%;
position: relative;
width:100%
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="progress">
<div class="progress-bar">
</div>
</div>
<br>
<div class="progress2">
<div class="progress-bar2">
</div>
</div>