I have :after for my animation, as you can see it isn't scoped by the relative. What I want is the bar should start from the width of the bar itself, now it's from the far left. What's the issue here?
.loading {
position: relative;
background-color: #E2E2E2;
&::after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
animation: loading 1s infinite;
}
}
https://media.giphy.com/media/Vek3fMxjoA4qxGveZr/giphy.gif
try to inspect the :after DOM in this demo
https://codepen.io/eldyvoon/pen/vMVgaO
Try to add overflow:hidden to .loading
furthermore, you can see it works well with changing ::after' background-color
.loading {
position: relative;
background-color: #E2E2E2;
overflow: hidden;
&::after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(100, 255, 255, .4), transparent);
animation: loading 1s infinite;
}
}
do not use transform: translateX(-100%), it will start from outside left of your .loading, and add left: 0
.loading {
position: relative;
background-color: #E2E2E2;
overflow: hidden;
&::after {
display: block;
content: '';
position: absolute;
width: 100%;
left: 0;
height: 100%;
/* transform: translateX(-100%); */
background: linear-gradient(90deg, transparent, rgba(100, 255, 255, .4), transparent);
animation: loading 1s infinite;
}
}
Related
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;
}
I want to animate the waves to go up when i click on the div i cant get the wave to animate when i change the heigt on the animation it self.
.tsx
<div className={styles.circle}>
<div className={styles.wave}></div>
</div>
.css
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-190%, -50%);
width: 25%;
height: 60%;
background: #ccc;
box-shadow: 0 0 0 5px #fff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.wave:before,
.wave:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgb(255, 255, 255);
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgb(255, 255, 255, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, var(--water)) rotate(0deg);
}
100% {
transform: translate(-50%, var(--water)) rotate(360deg);
}
}
I tried putting translate: transform 2s linear but that didnt work for me eighter do you guys have any idea beaces when i change the
:root {
--water: -90%
}
to
:root {
--water: -80%
}
it will just snap and not animate
The task is to make a hover effect on some list element. When mouse-over - gradient fills list element with some color from top to bottom; but when mouse-leave - gradient should continue its moving from top to bottom. With simple hover effect it always moves backways.
I use Vue and Nuxt, I want to make it on pure CSS but it seems to me its not possible. How to do it?
https://codepen.io/nosdmitry/pen/zYZgNQp
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transform: translateY(-100%);
transition: transform .3s ease;
}
.test:hover::before {
-webkit-transition: border-radius 2s;
cursor: pointer;
transform: translateY(0);
transition: transform .3s ease;
}
My code with gradient:
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transition: all .3s ease;
background: linear-gradient(to bottom, blue 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
}
.test:hover::before {
background-position: top;
}
Do it like below:
.box {
width:200px;
height:200px;
border:1px solid;
background: linear-gradient(blue 0 0) top/100% 0 no-repeat;
transition:0.5s, background-position 0s 0.5s;
}
.box:hover {
background-size:100% 100%;
background-position:bottom;
}
<div class="box">
</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>
The following animation is run over three different elements.
How could I randomize the animation such that they occur at different times?
#keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
http://jsfiddle.net/nqQc7/1186/
Also, there appears to be a delay between the animations. How can I speed up the duration between animations without increasing the speed of the transition itself?
I have tried adding more keyframes but it doesn't seem to increase the time between animations.
You can use different animation-delay and animation-duration values for each button like below:
/**
* Icon
*/
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }
/**
* The "shine" element
*/
.icon:after {
animation: shine 1s ease-in-out alternate infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:nth-child(1):after { animation-delay: .1s; }
.icon:nth-child(2):after { animation-delay: .3s; }
.icon:nth-child(3):after { animation-delay: .5s; }
/* Hover state - trigger effect */
/* Active state */
#keyframes shine{
60% {
top: -30%;
left: -30%;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
}
}
let
it
shine
<!--
Forked by:
Nicolas Gallagher - http://jsfiddle.net/KbNq7/
Chris Coyier - http://jsfiddle.net/chriscoyier/hk6z9/1/
-->