I tried to make a smooth animation, but the animate has a sort of "cut bug" in the middle.
How can I fix it ?
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
/*width: 0vw;*/
transform:translate(0vw);
width :0vw;
margin-left: 0;
}
50% {
/*width: 0vw;*/
/*transform:translate(5vw);*/
width :10vw;
}
100% {
/*width: 0vw;*/
transform:translate(1vw);
width :0vw;
margin-right: 0;
}
}
<div> </div>
Here is another way to achieve the same with less of code:
.loading {
height: 3px;
position: fixed;
top: 2vw;
left: 40vw;
right: 40vw;
height: 3px;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
animation: anime 2s ease-in-out infinite alternate;
}
#keyframes anime {
0% {
background-size: 0% 100%;
background-position: left;
}
50% {
background-size: 70% 100%;
}
100% {
background-size: 0% 100%;
background-position: right;
}
}
<div class="loading"></div>
Try setting your animation this way:
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
Is that the effect you are looking for?
Try this and you're done...
Don't use transform translate, use only width instead.
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
}
<div> </div>
Related
I have a problem, I made a beautiful button with snake effect but I need a last thing, I need to hide overflow to make the snake effect.
there is my button:
I want to hide theses parts, with overflow: hidden; this works with position: absolute; but not with relative.
body {
padding: 30px;
}
.btn-order {
position: relative;;
background-color: #961a22;
color: #ff7675;
padding: 30px 60px;
font-family: Helvetica;
font-size: 30px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
overflow: hidden;
}
.btn-order:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50%;
background: rgba(255, 255, 255, 0.07);
}
.btn-order span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #ffffff, #ff3a3a);
animation: animate1 1.25s linear infinite;
}
#keyframes animate1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn-order span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #ffffff, #ff3a3a);
animation: animate2 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.btn-order span:nth-child(3) {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(to left, #ffffff, #ff3a3a);
animation: animate3 1.25s linear infinite;
}
#keyframes animate3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.btn-order span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to top, #ffffff, #ff3a3a);
animation: animate4 1.25s linear infinite;
animation-delay: 0.625s;
}
#keyframes animate4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
<a href="#" class="btn-order">
<span></span>
<span></span>
<span></span>
<span></span>
COMMANDER
</a>
Thanks for helping me :)
Increasing the body width can fix it.
I just want to make a preloader that's positioned in the middle of the page.
Requirements:
position: fixed;
centered on the X-axis
It's just a div with class 'preloader' in body. Body is this div's direct parent, no other wrapper in between.
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 45%;
left: 50%;
width: 60px;
height: 60px;
-ms-transform: translateX(100px); /*100px just to test if it moved at all, initially had -50%, see list below*/
-webkit-transform: translateX(100px);
transform: translateX(100px);
//=====rest is just animation and aesthetics======
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
I've done:
display: block;
display: inline-block;
translateX(-50%);
translateX(30px);
translate(-50%, 0);
translate(30px, 0);
translate(-50%, -50%);
rearranging the transforms.. lol
took off -o & -mos
margin: 0 auto (worked with position: relative when I didn't need it to be fixed)
https://jsfiddle.net/goa3v2ke/#
You need to do like this, where you set top/left to 50% and then move them back with translate using the same value, int this case -50%.
Sample 1 now center it both horizontal and vertical, and by change the top/left values, you can move it in the direction you want, sample 2 has 33% as top value.
Update based on question edit
The small X/Y-axis offset is caused by the rotate being executed before the translate, so change your #keyframes rule to this, showed in sample 3 and an update of your fiddle
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Sample 1
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%,-50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
<div class="preloader"></div>
Sample 2
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%,-50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
<div class="preloader"></div>
Sample 3
.leftPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
left: 0px;
transition: width 1s;
}
.leftPreloaderBG.loaded {
width: 0;
}
.rightPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
right: 0px;
transition: width 1s;
}
.rightPreloaderBG.loaded {
width: 0;
}
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
.preloader.loaded {
opacity: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: white;
font-size: 1em;
background-color: gray;
background-position: center;
background-repeat: repeat;
}
<body>
<div class="preloader"></div>
<div class="leftPreloaderBG"></div>
<div class="rightPreloaderBG"></div>
</body>
It is because you override the transform translate value in the keyframe animation. Try it like this:
.leftPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
left: 0px;
transition: width 1s;
}
.leftPreloaderBG.loaded {
width: 0;
}
.rightPreloaderBG {
position: fixed;
background-color: black;
width: 50%;
height: 100%;
z-index: 98;
top: 0px;
right: 0px;
transition: width 1s;
}
.rightPreloaderBG.loaded {
width: 0;
}
#keyframes rotatePreloader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
display: inline-block;
z-index: 99;
top: 33%;
left: 50%;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
/*=====rest is just animation and aesthetics======*/
border: 3px solid #8A2EE6;
border-radius: 50%;
border-bottom: 3px solid black;
box-shadow: 0px 0px 20px 1px rgba(153, 102, 255, 0.5) inset, 0px 0px 20px 1px rgba(153, 102, 255, 0.5);
animation-name: rotatePreloader;
animation-duration: 0.65s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: opacity 1s;
}
.preloader.loaded {
opacity: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: white;
font-size: 1em;
background-color: gray;
background-position: center;
background-repeat: repeat;
}
<body>
<div class="preloader"></div>
<div class="leftPreloaderBG"></div>
<div class="rightPreloaderBG"></div>
</body>
This a code snippet for loading screen.
I want to place text below the loader animation, example: Loading.
I am not able to place/order div correctly below the .loader1 div.
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<div class="loader1"></div>
</div>
That's it. Thanks in advance.
Like this?
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
color:white;
text-align:center;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position:fixed;
display:block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader">
LOADING ...
<div class="loader1"> </div>
</div>
</body>
</html>
Added some CSS ro your loader div and placed it under the loader. Would this be what you're looking for?
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
color: #fff;
text-align: center;
width: 100px;
height: 20px;
line-height:20px;
padding: 5px 10px;
top: 200px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="loader1"></div>
Loading</div>
</body>
</html>
We will have to take some assumptions.
The width and height of circle is fixed as it is now. Then we use absolute position of div containing text Loading. Using margin-left, margin-top, left, top we can play and find what is suitable of us.
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-text{
position:absolute;
top:50%;
left:50%;
color:#fff;
margin-top:-15px;
margin-left:-30px;
}
<div class="loader">
<div class="loader1"></div>
<div class="loader-text">Loading</div>
</div>
Maybe u can do that like this:
Demo: CodePen
.loader {
position: absolute;
width: 100%;
height: 100%;
background: #222222;
z-index: 1000;
}
.loader1, .loading {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loading {
z-index: 1002;
width: 90px;
height: 20px;
color: #fff;
}
.loading p {
margin-top: 100px;
}
.loader1 {
z-index: 1001;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #DAC500;
border-right: 16px solid #4A6FB1;
border-bottom: 16px solid #DAC500;
border-left: 16px solid #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<div class="loader1"></div>
<div class="loading"><p>LOADING...</p></div>
</div>
I would change how you're doing it entirely and use flexbox like this.
It will work out a middle based on both the spinner and the text as opposed to having the spinner in the middle and the text below it.
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.load {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(34, 34, 34, 1);
z-index: 999;
}
.load-spinner {
border-radius: 50%;
border: 16px solid;
border-color: #DAC500 #4A6FB1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.load-text {
text-align: center;
font-variant: small-caps;
color: #fff;
font-weight: 700;
font-size: 18px;
padding-top: 10px;
}
#keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
<div class="load">
<div class="load-group">
<div class="load-spinner"></div>
<div class="load-text">Loading...</div>
</div>
</div>
I have created a ripple effect in this circle. Everything looks great, but I want that this effect happen more often. It takes to long time for the other wave to appear when the other is gone. I tried to increase the animation speed, but it doesn't look good:
Here is what I've done so far:
.pulse {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
animation: ring-1 2s ease-out infinite
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse" style="left: 0px; top: 0px;"></div>
</div>
Something like this? Add more ripple's and delay the start of animation by 0.5s, 1s, 1.5s and 2s respectively.
Read more about animation delay:
https://developer.mozilla.org/en/docs/Web/CSS/animation-delay
https://css-tricks.com/almanac/properties/a/animation/
.pulse1,
.pulse2,
.pulse3,
.pulse4 {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
}
.pulse1 {
animation: ring-1 2s 0.5s ease-out infinite;
}
.pulse2 {
animation: ring-1 2s 1s ease-out infinite;
}
.pulse3 {
animation: ring-1 2s 1.5s ease-out infinite;
}
.pulse4 {
animation: ring-1 2s 2s ease-out infinite;
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse1" style="left: 0px; top: 0px;"></div>
<div class="pulse2" style="left: 0px; top: 0px;"></div>
<div class="pulse3" style="left: 0px; top: 0px;"></div>
<div class="pulse4" style="left: 0px; top: 0px;"></div>
</div>
In the .pulse css you can change the animation: ring-1 0.5s ease-out infinite
I have changed the speed from 2s to 0.5s
I was just looking at a simple SVG cake animation HERE , the CSS code looks like so:
#import url(http://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
width: 100%;
height: 100%;
}
body {
background: #ee9ca7;
}
#cake {
display: block;
position: relative;
margin: -10em auto 0 auto;
}
*/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
.text {
color: #8b6a60;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style:italic;
text-align: center;
h1 {
font-size: 1.4em;
}
}
After inspecting the code a bit i came to know the candle flame was caused by this set of HTML elements:
<div class="velas">
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
</div>
And this HTML has the following CSS code:
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
Now i don't see the CSS code that is actually cauing the red and yellow flame , i beleive the white shadow is caused by the very high box shadow given in the animations , but somehow i don't see where the candle flame is created , can somebody guide me as to where the candle flame is really created ?
The colors are set by RGB values. There's a yellow, red, and some pink.
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5); /* yellow */
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); /* pink */
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1); /* red */
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); /* pink again */
transform: translateY(-20px) scale(0);
}
}
Timings to change the colors are set in .fuego:nth-child(1) through .fuego:nth-child(6)