I'm trying to create a animated input/progress bar, but just the untracked part must be animated.
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#loading input {
background-size: 100%;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); //just random colors as example
animation: gradient 5s ease infinite;
height: 100%;
}
<div id="loading">
<input id="progress" type='range' min="0" max="100" step="0.01" value="0">
</div>
The problem is that I have no idea about how I can make the untracked area animated. Could you please help me fix this?
Related
I'm trying to make a gradient animation in the background of a of a svg. Is this possible?
.ani_a {
background-color: #fff;
animation: anibg01 10s infinite linear;
background-image: linear-gradient(0deg,#0d4ba0,#00adee,#00aba5,#37b34a,#8dc63f,#ccdb29,#ffdd15,#fff100,#f6921e,#f05a28,#ec1c24,#ff008b,#90278e,#652d90,#0d4ba0,#00adee);
background-size: 1500% 100%;
}
#keyframes anibg01 {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
<svg>
<polygon class="ani_a" points="35,70 70,70 105,0 70,0 "/>
</svg>
If you are looking to animate the linear gradient (by moving it) within that shape you could take an alternative approach using CSS/HTML rather than SVG to define the shape.
This snippet takes the linear-gradient and makes it the background of a div. The div is clipped to give a shape using clip-path with a polygon and the background is animated to move vertically downwards with repetition.
.ani_a {
background-color: #fff;
animation: anibg01 10s infinite linear;
background-image: linear-gradient(0deg, #0d4ba0, #00adee, #00aba5, #37b34a, #8dc63f, #ccdb29, #ffdd15, #fff100, #f6921e, #f05a28, #ec1c24, #ff008b, #90278e, #652d90, #0d4ba0, #00adee);
background-size: 100% 100%;
width: 20vmin;
height: 10vmin;
display: inline-block;
clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
}
#keyframes anibg01 {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0 10vmin;
}
}
<div class="ani_a">div</div>
I want to create a shine loading animation which will appear on multiple elements with different background colors.
Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths.
Is there a way I can animate background-image with percentage units?
The animation created
body {
background: black;
}
header {
width: 100%;
height: 50px;
background-color: rebeccapurple;
background-image: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.3) 50%,
transparent 100%
);
background-repeat: no-repeat;
background-position: -100vw;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: -100vw;
}
100% {
background-position: 100vw;
}
}
<header></header>
An idea is to make the size of the gradient to be 3 times bigger than the container and color the middle part of it then you slide it from left to right:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
linear-gradient(90deg,#0000 33%,rgba(255,255,255,0.3) 50%,#0000 66%)
rebeccapurple;
background-size:300% 100%;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: right;
}
/*100% {
background-position: left; it's the default value, no need to define it
}*/
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Another alternative for a different animation:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
repeating-linear-gradient(90deg,#0000 0,rgba(255,255,255,0.3) 25%,#0000 50%)
rebeccapurple;
background-size:200% 100%;
animation: shine 1s infinite linear;
}
#keyframes shine {
0% {
background-position: right;
}
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Related question: Using percentage values with background-position on a linear-gradient
I want to use a responsive div with a scrolling background image.
In the example I showed it small and large. I want the entire scroll to be constant - so the small div should take x seconds and the large div should also take x seconds (rather than the small one taking less time to complete a whole image pan than the larger one).
I've tried using percentage values in background-position-x but it stops the animation.
.offset {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
background-size: 100%;
animation: slideLeft768px 5s linear infinite;
}
.div1 {
width: 76.8px;
height: 57.6px;
}
.div2 {
width: 768px;
height: 576px;
}
#keyframes slideLeft768px {
0% {
background-position-x: 768px;
}
100% {
background-position-x: 0px;
}
}
<div class="offset div1"></div>
<div class="offset div2"></div>
====================
This is based on Temani Afif's answer:
.offset {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
background-size: 100%;
animation: slideLeft 5s linear infinite;
width: var(--p);
--p: 40vw;
height: 30vw;
}
.div1 {
--p: 12vw;
height: 9vw;
}
#keyframes slideLeft {
0% {
background-position-x: var(--p);
}
100% {
background-position-x: 0px;
}
}
<div class="offset div1"></div>
<div class="offset div2"></div>
I made it only use responsive units so it adjusts when you resize the window.
You can consider CSS variable to make the animation dynamic:
.offset {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
background-size: 100%;
animation: slideLeft768px 5s linear infinite;
width: var(--p);
}
.div1 {
--p: 76.8px;
height: 57.6px;
}
.div2 {
--p:768px;
height: 576px;
}
#keyframes slideLeft768px {
0% {
background-position: var(--p,0px) 0px;
}
100% {
background-position: 0px 0px;
}
}
<div class="offset div1"></div>
<div class="offset div2"></div>
And since your are using the same image with known dimension you can optimize your code like below:
.offset {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
background-size: 100%;
animation: slideLeft768px 5s linear infinite;
width: calc(768px * var(--p,1));
height: calc(576px * var(--p,1));
}
.div1 {
--p: 0.1;
}
.div2 {
--p:0.2;
}
#keyframes slideLeft768px {
0% {
background-position: calc(768px * var(--p,1)) 0px;
}
100% {
background-position: 0px 0px;
}
}
<div class="offset div1"></div>
<div class="offset div2"></div>
<div class="offset" style="--p:0.8"></div>
You can also check this answer (https://stackoverflow.com/a/51734530/8620333) to understand why percentage value won't work and how to make it working.
The trick is to use a percentage for the background-position. Since setting the background-size to 100% makes this impossible, we need to set it to another value.
A trick is to use the padding for this. Create a padding right the same dimension than the width. Making the background origin the paddin box, and clip tghe content box, now we can set the size to 50%. Visually, nothing will change. (In case that the extra padding is a problem, you could set a negative margin or a clip-path). And now, the background-position can be moved in percentages:
.offset {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
background-size: 50%;
background-origin: border-box;
background-clip: content-box;
animation: slideLeft768px 5s linear infinite;
}
.div1 {
width: 76.8px;
padding-right: 76.8px;
height: 57.6px;
}
.div2 {
width: 768px;
padding-right: 768px;
height: 576px;
}
#keyframes slideLeft768px {
0% {
background-position-x: 100%;
}
100% {
background-position-x: 0%;
}
}
<div class="offset div1"></div>
<div class="offset div2"></div>
The problem is on iPhones, on android mobiles it code works well. On Safari the background picture is zoomed, you can see this on the picture below:
Display on Safari:
Safari-view
Display on Android(properly):
Android-view
What can I improve with that code?
HTML:
<div id="background">
<h2>Lorem ipsum</h2>
<hr />
<h3>Dolor sit amet</h5>
</div>
CSS:
#background{
height: 92.5vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: mymove 16s infinite;
animation: mymove 16s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-image: url("gallery/DSC03389n.JPG");
}
#keyframes mymove {
0%{background-image: url("gallery/DSC03389n.JPG");}
46%{background-image: url("gallery/DSC03389n.JPG");}
54%{background-image: url("gallery/DSC03385n.JPG");}
100%{background-image: url("gallery/DSC03385n.JPG");}
from { background-position: 17% 0; }
to { background-position: 70% 0; }
}
#media screen and (max-width: 600px) {
#background{
background-image: url("gallery/DSC03389m.JPG");
}
#keyframes mymove {
0%{background-image: url("gallery/DSC03389m.JPG");}
46%{background-image: url("gallery/DSC03389m.JPG");}
54%{background-image: url("gallery/DSC03385m.JPG");}
100%{background-image: url("gallery/DSC03385m.JPG");}
from { background-position: 17% 0; }
to { background-position: 74% 0; }
}
}
The issue is with background-attachment: fixed; and has been around for a really long time and is super frustrating since cover and fixed are incredibly common CSS background parameters.
The solution here is to nix the fixed on Safari.
What we did was add a device and browser class to our body with PHP, and set its own CSS declaration
.ipad #background,
.safari #background {
background-attachment: scroll;
}
I am trying to make a small keyframe animation.
When the user hovers on a button, I want the background image to move slightly to the right, then back again. So a little "bounce" movement.
In my first example I used a simple hover in CSS that changed the background position from 91% to 93% which results in movement when hovered.
However when I tried to do something similar, to use a keyframe animation called nextarrow, the animation doesn't run.
Here is a JSFiddle showing my working example (button-one) and my non-working example (button-two)
Where have I gone wrong?
http://jsfiddle.net/franhaselden/Lfmegdn5/
.button-two.next:hover{
-webkit-animation: nextarrow 1s infinite;
-moz-animation: nextarrow 1s infinite;
-o-animation: nextarrow 1s infinite;
animation: nextarrow 1s infinite;
}
#keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
Alternative to #jbutler483's answer use Prefix free: Break free from CSS vendor prefix hell!
.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}
.button-one.next:hover{background-position: 98% center;}
.button-two.next:hover{
animation: nextarrow 1s infinite;
}
#keyframes nextarrow {
0%,100% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">
Note: you can combine 0% and 100% since they are the same:
from
#keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
to
#keyframes nextarrow {
0%,100% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
}
or to this
#keyframes nextarrow {
from,to {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
}
You need to prefix your keyframes as well:
DEMO
#-webkit-keyframes nextarrow{ keyframe definition here}
#-moz-keyframes nextarrow{ keyframe definition here}
#-o-keyframes nextarrow{ keyframe definition here}
#keyframes nextarrow{ keyframe definition here}
for example
.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}
.button-one.next:hover{background-position: 98% center;}
.button-two.next:hover{
-webkit-animation: nextarrow 1s infinite;
-moz-animation: nextarrow 1s infinite;
-o-animation: nextarrow 1s infinite;
animation: nextarrow 1s infinite;
}
#-webkit-keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
#-o-keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
#-moz-keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
#keyframes nextarrow {
0% {
background-position: 91% center;
}
50% {
background-position: 93% center;
}
100% {
background-position: 91% center;
}
}
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">