I want to create a gradient border animation starting from the top left to the bottom right. The animation will be used for images within this div.
I tried every degree of angle, but didn't get this to work in the direction I want, it always starts at the right top or at the bottom right.
Also tried it with negative degree values.
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:before, .block:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
background-size: 400%;
width: calc(100% + 2px);
height: calc(100% + 2px);
z-index: -1;
animation: shine 8s linear infinite;
}
#keyframes shine {
to {
background-position: 400% center;
}
}
.block:after {
filter: blur(8px);
}
<div class="block"></div>
Update your code like below:
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:after {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
background-size: 400% 400%;
z-index: -1;
animation: shine 3s linear infinite;
filter: blur(8px);
}
#keyframes shine {
from {
background-position: 100% 100%
}
to {
background-position: 0 0
}
}
<div class="block"></div>
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
I got this shape and trying to achieve this in css3, what I tried so far is:
.door {
width: 150px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
transform: rotate(17deg) skew(17deg);
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:90% 100%}
100%{background-position:10% 0%}
}
<div class="door"></div>
But I couldn't handle this with skew any idea or solution?
You are almost there. Consider a pseudo element to be able to hide the bottom part using overflow:hidden
.door {
width: 100px;
height: 160px;
display: grid;
border-radius: 10px;
overflow:hidden;
transform-origin: bottom;
transform: skewX(-4deg);
}
.door:before {
content:"";
background-image: linear-gradient(180deg, #234dbc, #b84295);
border-radius: inherit;
transform: skewY(17deg);
transform-origin: bottom left;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
50% {
background-position: 90% 100%
}
}
<div class="door"></div>
Always :before solve the problem
.door {
width: 100px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
overflow: hidden;
transform: skewX(-2deg)
}
.door::before {
content: "";
position: absolute;
width: 150px;
height: 52px;
background: rgb(248, 248, 248);
top: -30px;
left: 0px;
transform: skewY(18deg);
}
<div class="door"></div>
You should make the :before background like the background of the area to seem like it's transparent
For that i make the background color of the :before rgb(248, 248, 248)
So I am just a beginner and I am just trying to figure out animations and how they work.
My plan is to move the ball infinitenly in an infinite number of degrees (lets say 90) on a line. Here are a couple of problems I wondered:
Is there a better way to use classes that have common and slightly different rules (having different rotations) ?
How can I have the ball movement on the new lines having different rotations?
.line,
.line-deg90 {
background-color: hsl(0, 0%, 0%);
height: 3px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: 0 0 0 -200px;
transform-origin: 50%;
}
.line-deg90 {
transform: rotate(90deg);
}
.ball {
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
top: -15px;
left: 0;
animation: move 2s infinite alternate ease-in-out;
}
#keyframes move {
0% {
left: 0px;
top: -15px;
}
100% {
left: 370px;
top: -15px;
}
<div class="line">
<div class="ball"></div>
<div class="line-deg90"></div>
Here is an idea using CSS variables to have a generic code. Simply adjust the angle and the offset to control the movement
.ball {
--angle: 0deg;
--offset: 150px;
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
inset: 0;
margin: auto;
animation: move 2s infinite alternate ease-in-out;
}
#keyframes move {
0% {
transform: rotate(var(--angle)) translate(var(--offset))
}
100% {
transform: rotate(var(--angle)) translate(calc(-1*var(--offset)))
}
}
html {
min-height:100%;
background:
linear-gradient(red 0 0) center/100% 2px,
linear-gradient(red 0 0) center/2px 100%;
background-repeat:no-repeat;
}
<div class="ball"></div>
<div class="ball" style="--angle:90deg;--offset:100px"></div>
I have an oval, and inside the oval, I have a strip that I need it to have waves
I have made this:
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
from {
bottom: 0%;
}
to {
bottom: 100%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>
How can i make that my strip have infinite wave animation?
You can try some repeated radial-gradient over a linear-graident to create the waves. Then you can simply animate the background-position and you can get rid of one DOM element.
#keyframes wipe {
from {
background-position:0 85px,0 120px;
}
to {
background-position:100px -45px,100px -20px;
}
}
.oval {
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
background:
radial-gradient(circle at center,#4286f4 67%,transparent 67.5%)0 5px /50px 50px repeat-x,
linear-gradient(#343434,#343434)0 30px/100% 150% repeat-x;
background-color: #4286f4;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
<div class="oval">
</div>
If I understand correctly you want the wave to go up and down?
You can specify percentages instead of from and to as keyframes-selector
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
0% {
bottom: 0%;
}
50% {
bottom: 100%;
}
100% {
bottom: 0%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>
I'm having trouble making a smoothly animated striped div, like a progress bar.
CSS:
.animationStripes{
width: 300px;
height: 50px;
background-image: repeating-linear-gradient(-45deg, rgb(0, 0, 0), rgb(0, 0, 0) 25px, blue 25px, blue 50px);
-webkit-animation:progress 2s linear infinite;
-moz-animation:progress 2s linear infinite;
-ms-animation:progress 2s linear infinite;
animation:progress 2s linear infinite;
}
#keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -70px 0px;
}
}
http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview
The problem is that there is a weird misalignment on the very right side of the background image gradient. How do i fix this misalignment?
Have you seen this tutorial on CSS Tricks?
#import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
body {
padding: 20px;
font-family: 'Ropa Sans', sans-serif;
}
.product {
width: 376px;
padding: 15px;
position: relative;
float: left;
margin: 0 20px 0 0;
}
.product>img {
display: block;
position: relative;
}
.product:hover .product-hover,
.product:active .product-hover {
opacity: 1;
}
.product-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease;
background-size: 30px 30px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
animation: barberpole 0.5s linear infinite;
}
#keyframes barberpole {
from {
background-position: 0 0;
}
to {
background-position: 60px 30px;
}
}
.product-info {
position: absolute;
bottom: 30px;
right: 30px;
background: white;
width: 150px;
padding: 10px 10px 50px 10px;
}
.subhead {
color: #f00;
text-transform: uppercase;
font-weight: bold;
}
.product-name {
color: #990033;
text-transform: uppercase;
font-weight: bold;
margin: 0;
letter-spacing: -1px;
}
.price {
position: absolute;
bottom: 10px;
right: 10px;
}
.amount {
color: red;
font-size: 150%;
}
.amount>span {
font-size: 75%;
}
h1 {
font-size: 72px;
margin: 2px 0 0 0;
}
VIEW SCSS CODE
<div class="product">
<div class="product-hover"></div> <img src="http://fillmurray.com/300/300" />
<div class="product-info">
<div class="subhead">Sale</div>
<h2 class="product-name">Fleece</h2>
<p class="product-description">Beat the chill and get cozy.</p>
<div class="price"> <span class="from">from</span> <span class="amount"> <span>$</span>9.90 </span>
</div>
</div>
</div>
Well I managed to fix it just by adding one thing and making no alterations to my original code. Simply adding background-size: 150% 100%; kept the image from clipping awkwardly on the right side.
http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview
Make the linear gradient with percentage values, not with pixel. apply background-size, in your case i'd say background-size:50px 50px; and in keyframes, move the background as much, as is the background size background-position: -50px 0px;
Also an example
http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview
If the answer suits you, then mark it as answered and have a good day :)