Is there any way to make this same animation while also having a slanted background ?
either using pure css or react spring ?
Hover animation
i have tryed both solutions under but non of em go me slander background + the left to right, left to right animation.
HTML:
<div>Box</div>
How i want the slider to look like with slander.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 150%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
and under her is the animation goal:
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
background: linear-gradient(#488566 0 0) no-repeat;
background-size: 0% 100%;
background-position: 100% 0%;
transition: background-size .4s;
}
div:hover {
background-size: 100% 100%;
background-position: 0% 0%;
transition: background-size .4s;
}
How would I be able to improve this animated static noise effect using a css gradient?
CSS only, no javascript, no svg, no image, using only a gradient, and adjusting that.
A tv no signal noise effect is what I am looking for using a css gradient.
Does anyone know how this effect can be improved, made better?
Is there a better way it can be written?
I am looking for something that is more accurate to a tv noise effect.
I think the way this effect is written can be improved.
Are there any tweaks or adjustments that can be made to it to so that it better depicts a tv noise effect?
The gradient can be anything, as long as it is a gradient, it doesn't matter what kind.
This one uses radial gradient:
https://jsfiddle.net/xhdkza5w/
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation: back 5s linear infinite;
}
#keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
<div class="tv-static"></div>
This one uses a conic-gradient: https://jsfiddle.net/bkx50apm/
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-conic-gradient(white, black 0.00085%);
animation: back 25s linear infinite;
}
#keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
<div class="tv-static"></div>
Do you mean this effect?
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.animation {
width: 240px;
height: 240px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation: animation 5s linear infinite;
}
#keyframes animation {
from {
background-position: 0px 0px;
}
to {
background-position: 240px 240px;
}
}
<div class="animation"></div>
Or this effect?
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.animation {
width: 240px;
height: 240px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
background-position: center;
animation: back 5s linear infinite;
}
#keyframes back {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
<div class="animation"></div>
Edit: Added background-position: center.
By overlaying 2 of those effect on top of each other and each div has a different animation, you can create interference between the two that removes the artifacts of only having 1 static noise made from a single div.
This might be improved as I'm not well versed in css but the proof of concept works
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.container_row {
display: flex;
}
.layer1 {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
.layer2 {
width: 100%;
margin-left: -100%;
background-color: rgba(255, 255, 255, 0.5);
}
.tv-static {
width: 500px;
height: 300px;
margin: auto;
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
}
.animation1 {
animation: back1 1s linear infinite;
}
.animation2 {
animation: back2 0.1s linear infinite;
}
#keyframes back1 {
from {
background-size: 100% 100%;
}
to {
background-size: 99% 100%;
}
}
#keyframes back2 {
from {
background-size: 48.56% 50%;
}
to {
background-size: 43.9% 50.1%;
}
}
<div class="layer1">
<div class="tv-static animation1"></div>
</div>
<div class="layer2">
<div class="tv-static animation2"></div>
</div>
With smooth timing function, animations don't give that effect we need to use step timing function to give those sudden change effect.
Solution 1: I've changed animation. And tweaked your gradient a little bit. I think using gradient is not a reliable solution because browsers do calculations differently and fractions, rounding change output. You are using radial gradient it looks things are going outwards from center of the placement. You'll have to test his on every platform and browser to see if it looks same.
Solution 2: Used SVG instead of gradient. The feTurbulence filter gives the noise effect. You can use svg as background-image.
Solution 3: Used image instead of gradient with same animation. Advantage of using image is that it'll look same across all browsers and screens.
Solution 3: Simply used noise gif image. No animation is required. :)
View following in 'full page' mode:
body {
text-align: center;
}
.tv {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static {
position: absolute;
top: -200px;
left: -200px;
margin: auto;
height: 800px;
width: 800px;
background-image: repeating-radial-gradient(circle at 17% 132%, white 0.0005px, black 0.00085px);
animation: anim 1s steps(2, jump-both) infinite both;
transform: translate3d(0, 0, 0);
}
/******************************/
.tv0 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
isolation: isolate;
}
.tv-static0 {
position: absolute;
top: 0px;
left: 0px;
margin: auto;
height: 300%;
width: 300%;
animation: anim 1s steps(2, end) infinite both;
transform: translate3d(0, 0, 0);
filter: contrast(300%) brightness(50%);
}
.tv-static0 svg {
height: 200%;
width: 100%;
transform: scale(2.5);
}
/******************************/
.tv1 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static1 {
position: absolute;
top: -500px;
right: -500px;
bottom: -500px;
left: -500px;
margin: auto;
background-image: url(https://i.stack.imgur.com/uzEM4.png);
animation: anim 1s steps(2, end) infinite both;
transform: translate3d(0, 0, 0);
}
/******************************/
.tv2 {
width: 400px;
height: 200px;
border: 6px solid black;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 50% / 10%;
}
.tv-static2 {
position: absolute;
top: -500px;
right: -500px;
bottom: -500px;
left: -500px;
margin: auto;
background-image: url(https://i.stack.imgur.com/9Be02.gif);
transform: translate3d(0, 0, 0);
}
#keyframes anim {
0% {
transform: translateX(0px, 0px);
}
10% {
transform: translate(-100px, 100px);
}
20% {
transform: translate(150px, -100px);
}
30% {
transform: translate(-100px, 100px);
}
40% {
transform: translate(100px, -150px);
}
50% {
transform: translate(-100px, 200px);
}
60% {
transform: translate(-200px, -100px);
}
70% {
transform: translateY(50px, 100px);
}
80% {
transform: translate(100px, -150px);
}
90% {
transform: translate(0px, 200px);
}
100% {
transform: translate(-100px, 100px);
}
}
Your original code. modified. May not work on every browser.
<div class="tv">
<div class="tv-static"></div>
</div>
<br> Using SVG `feTurbulence` filter
<div class="tv0">
<div class="tv-static0">
<svg viewBox="0 0 200% 200%" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence type='turbulence' result='noise' baseFrequency='0.7' numOctaves='6' seed='2'
stitchTiles='noStitch' />
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>
<div class="overlay"></div>
</div>
</div>
<br>
<br> Animating image. Color TV
<div class="tv1">
<div class="tv-static1"></div>
</div>
<br> Using gif. No animation.
<div class="tv2">
<div class="tv-static2"></div>
</div>
This question already has an answer here:
How to create a circular arc (sector) with a background image?
(1 answer)
Closed 2 years ago.
I'm trying to make a pie chart with PNG image as background-image there:
.piebg {
width: 95px;
height: 95px;
border-radius: 50%;
background-image: url('https://pngimg.com/uploads/pizza/pizza_PNG44095.png');
background-size: cover;
}
.pie {
width: 102px;
height: 102px;
border-radius: 50%;
background: inherit;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #fff;
transform-origin: left;
animation: spin 5s linear infinite, bg 5s step-end 1;
}
.pie::after {
content: '';
display: block;
height: 100%;
right: 50px;
border-radius: 100% 0 0 100% / 50%;
background-color: #fff;
position: relative;
top: -102px;
}
#keyframes spin {
to {
transform: rotate(.5turn);
}
}
#keyframes bg {
50% {
background: transparent;
}
}
<div class="piebg">
<div class="pie"></div>
</div>
There is an issue with the wrong fill of a pie chart area.
CSS animation is not a strong side of my experience yet to complete this example.
Could you help me to find an article or example how to complete my pie chart?
If you consider discontinuous animation, we can do this with only single div and mask.
.pie {
width: 95px;
height: 95px;
border-radius: 50%;
background-image: url('https://i.stack.imgur.com/tJMg9.png');
background-size: cover;
--s: 0%;
--mask: conic-gradient(#000 var(--s), transparent var(--s) 360%);
-webkit-mask: var(--mask);
mask: var(--mask);
animation: pie 2s forwards;
/* ↑ you can use "infinite" instead */
}
#keyframes pie {
10% {
--s: 10%;
}
20% {
--s: 20%;
}
30% {
--s: 30%;
}
40% {
--s: 40%;
}
50% {
--s: 50%;
}
60% {
--s: 60%;
}
70% {
--s: 70%;
}
80% {
--s: 80%;
}
90% {
--s: 90%;
}
100% {
--s: none;
}
}
<div class="pie"></div>
Also now we can make a continuous animation with #property
#property --s {
initial-value: 0%;
inherits: false;
syntax: '<percentage>';
}
.pie {
width: 95px;
height: 95px;
border-radius: 50%;
background-image: url('https://i.stack.imgur.com/tJMg9.png');
background-size: cover;
--s: 0%;
--mask: conic-gradient(#000 var(--s), transparent var(--s) 360%);
-webkit-mask: var(--mask);
mask: var(--mask);
animation: pie 2s 1s infinite;
}
#keyframes pie {
100% {
--s: 100%;
}
}
<div class="pie"></div>
I'm trying to make a simple download bar, but it turns out only a solid color without transition animation.
In addition, the "repeating-linear-gradient" does not work and I cannot understand why.
I am hope for your help. Thank you!
.Download {
height: 80px;
width: 1000px;
border: 2px solid black;
border-radius: 100px;
/*background: repeating-linear-graient (90deg, blue, red, 100px);*/
background: linear-gradient(to left, blue, red);
animation-name: download;
animation-direction: 10s;
animation-timing-function: linear;
animation-direction: normal;
}
#keyframes download {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
<div class="Download">
</div>
You can use pseudo code to achieve this.
.Download {
height: 80px;
width: 1000px;
border: 2px solid black;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.Download:after {
content: "";
position: absolute;
background-image: linear-gradient(to left, blue, red);
width: 100%;
height: 100%;
top: 0;
left: -100%;
animation: download 5s;
}
#keyframes download {
0% {
left: -100%;
}
100% {
left: 0%;
}
}
<div class="Download">
</div>
You need to make half the linear gradient transparent (a bit list to prevent a hole in the end). Set the background position x to 100% to present only the transparent part. Then animation to 0:
.Download {
height: 80px;
width: 1000px;
border: 2px solid black;
border-radius: 100px;
background: linear-gradient(to right, red 0, blue 50.02%, transparent 50.02%) no-repeat;
animation: download 10s forwards;
background-position: 100% 0;
background-size: 200% 100%;
}
#keyframes download {
to {
background-position: 0 0;
}
}
<div class="Download">
</div>
I wanted to animate a the text fill with CSS. The Text should be filled with color from left to right.
this is my CSS:
.box-with-text {
background-image: -webkit-linear-gradient(right, crimson 50%, white 50%);
background-repeat: repeat;
background-position: 0 0;
background-size: 200% 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes normal forwards ease-in-out;
animation: stripes 2s normal forwards ease-in-out;
}
Now only the first letter is color-filled.
here is the fiddle
you may also take a look at flex (for centering things) and mix-blend-mode, so it can be avalaible also for Firefox:
.box-with-text {
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
background: black;
display: table;
color: white;
mix-blend-mode: multiply
}
#-webkit-keyframes stripes {
to {
background-size:100% 100%;
}
}
#keyframes stripes {
to {
background-size:100% 100%;
}
}
html {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
height: 100%;
background: black;
}
body {
margin: auto;
background: -webkit-linear-gradient( crimson , crimson) turquoise no-repeat 0 0;
background: linear-gradient( crimson , crimson) turquoise no-repeat 0 0;
background-size: 0 100%;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
<div class="box-with-text">
Text
</div>
http://codepen.io/gc-nomade/pen/XKNKzd
/* Main styles */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
.box-with-text {
background-image: -webkit-linear-gradient(left, crimson 50%, white 50%);
background-repeat: repeat;
background-position: 0 0;
background-size: 100% 200px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
#-webkit-keyframes stripes {
100% {
background-position: 0 -50px;
}
}
#keyframes stripes {
100% {
background-position: 385px 0;
}
}
/* Other stuff */
body {
overflow: hidden;
background: #000;
color: #FFF;
}
.box-with-text {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="box-with-text">
Text
</div>
In this case you should change
#keyframes stripes {
100% {
background-position: 385px 0;
}
}
position depends on text width;