I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.
.line {
width: 5rem;
height: 1px;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
transform: rotate(90deg);
animation: stand linear 1s;
}
#keyframes stand {
0% {width: 0;}
100% {width: 5rem;}
}
<div class="line"></div>
That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.
.line {
width: 1px;
height: 5rem;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
animation: stand linear 1s;
}
#keyframes stand {
0% {height: 0;}
100% {height: 5rem;}
}
<div class="line"></div>
The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.enter code here
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.Stack {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="Stack"></div>
</body>
</html>
This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
So I'm trying to implement a loader that spins in the middle of the screen I have used transform:translate earlier do this ex:
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
I tried to implement something similar but instead of getting centered the top left appears to be in the center. Here's my code
HTML
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
CSS
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
One trusted way to centralize one item is to use display: flex with justify-content: center and align-items: center in the parent element.
*, *::before, *::after{
box-sizing:border-box;
}
.waitwrapper{
background-color: #455879;
width: 98vw;
height: 97vh;
display:flex;
justify-content:center;
align-items:center
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
But why your code doesn't work very well? I must tell you when you change transform property in your animation actually you overwrite it. And because of it transform: translate(-50%, -50%);, doesn't work enymore. For solve that problem you can use below solution
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
/* transform:translate(-50%,-50%); */
}
#keyframes spin {
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
Don't use transform. Use display: flex; on the parent and margin: auto; on the spinner element — to center it both horizontally and vertically.
See the code comments for the needed changes:
/* Quick reset */ * {margin: 0; box-sizing: border-box; }
.loader-wrapper {
background-color: #455879;
position: fixed; /* why relative? use fixed! Should cover the page? */
z-index: 9999; /* overlay other elements */
width: 100vw;
height: 100vh;
display: flex; /* use display flex */
}
.loader {
height: 20%; /* use height instead of width */
aspect-ratio: 1;
margin: auto; /* center inside the flex parent */
border: 10px solid #f3f3f3;
border-top-color: transparent; /* use transparent instead */
border-radius: 50%;
animation: spin 2s linear infinite;
}
#keyframes spin {
to { transform: rotate(1turn); }
}
<section class="loader-wrapper">
<div class="loader"></div>
</section>
Here is one of the ways how to center position-absolute element with width set:
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
Complete snippet:
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
</body>
</html>
body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 149%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1){
transform: rotate(0deg);
}
.box span:nth-child(2){
transform: rotate(90deg);
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
}
/* setting up one line */
.box span:before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
I created this CSS but the problem with my CSS is I am not able to get all four borders on end. I am managed to get 3 borders but the fourth border does not seem to fit properly. I was wondering if someone can guide me on how to arrange all four borders blue color at the end of the card. Could some one please guide or help to get proper animation. I would really appreciate some help on this.
Thank you in advance
Use two animation effects, Because the width and height are different, changing the Angle of the animation line is not on the edge.
body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(180deg);
}
/* setting up one line */
.box span:nth-child(odd):before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
.box span:nth-child(even):before{
content: '';
position: absolute;
height: 100%;
width: 2px;
background-color: #0093ff;
animation: animate2 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
#keyframes animate2 {
0%{
transform: scaleY(0);
transform-origin: bottom;
}
50%{
transform: scaleY(1);
transform-origin: bottom;
}
50.1%{
transform: scaleY(1);
transform-origin: top;
}
100%{
transform: scaleY(0);
transform-origin: top;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
left: -170px;
}
I dont know if this is right or there is any other proper solution but this work for me. Thank you to the commentor to direct me in proper direction. I appreciate it
You need to set the width: property to the animation's full width underneath .box span, and then set its second and fourth nth-child's right: and left properties. Something like:
body {
margin: 0;
padding: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before {
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p {
color: white;
}
.box span {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1) {
transform: rotate(0deg);
}
.box span:nth-child(2) {
transform: rotate(90deg);
right: -87px;
left: auto;
}
.box span:nth-child(3) {
transform: rotate(180deg);
}
.box span:nth-child(4) {
transform: rotate(270deg);
left: -87px;
right: auto;
}
/* setting up one line */
.box span::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
Here is a simplified version where you will need few lines of code. The whole animation can be done using background without extra elements:
body {
margin: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
background:
linear-gradient(#0093ff 0 0) 0 0,
linear-gradient(#0093ff 0 0) 100% 0,
linear-gradient(#0093ff 0 0) 100% 100%,
linear-gradient(#0093ff 0 0) 0 100%;
background-size:100% 2px,2px 100%;
background-repeat:no-repeat;
background-color: #001e2d;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
overflow:hidden;
animation:animate 2s linear infinite;
}
#keyframes animate{
from {
background-size:0% 2px,2px 0%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50% {
background-size:100% 2px,2px 100%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50.1% {
background-size:100% 2px,2px 100%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
100% {
background-size:0% 2px,2px 0%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
transform-origin:top;
}
.box:hover:before {
width:50%;
transform: skewX(-5deg);
}
.box .content {
margin:15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
color: white;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
font-size: 30px;
margin: 0 0 10px;
}
<div class="box">
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
Related question with a similar effect: Drawing border colors during a CSS transition
I have a css-doodle animation which is basically a small, animated circle, which I would like to use as a replacement for the letter "O" in my website header (h1.) Therefore, the animation needs to be on the same line as my header, with header text on each side of it (ex: "PURPLE X M[css-doodle]SS"). I would also like to place a dashed border that wraps around the header, and ensure that the css-doodle animation still displays even when changing the width of the page. My HTML and CSS stylesheet are below:
.divheader {
display: inline-block;
position: static;
height: 200px;
width: 700px;
border: 2px dashed #000000;
}
p {
display: inline-block;
position: static;
background-color: white;
font-size: 38px;
font-color: white;
font-family: "Courier New", Courier, monospace;
}
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #0000;
}
<html lang="en">
<head>
<link href="doodletest.css" type="text/css" rel="stylesheet" />
<script src="https://unpkg.com/css-doodle#0.7.7/css-doodle.min.js">
</script>
</head>
<title>purple x moss</title>
<div class="divheader">
<p>PURPLE x M
<css-doodle> :doodle { #grid: 40x1 / 40vmin; perspective: 23vmin; } background: #multi(#r(220, 40), ( radial-gradient( #p(#00b8a9, #5f4f93, #8d7ebd, #b1a7d1) 55%, transparent 60% ) #r(100%) #r(100%) / #r(1%, 3%, .1) #lr() no-repeat )); #size: 80%; #place-cell:
center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 20s linear infinite; animation-delay: calc(#i() * -.6s); #keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% {
transform: translate3d(0, 0, #r(50vmin, 55vmin)) rotate(#r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
</css-doodle>SS</p>
</div>
I've recently been working on a project which involves a heavyloaded webpage,
it loads the files in the background and then eventually will allow them to disappear after a certain amount of time,
I have tried my hardest to do some research but with many attempts I have not come to a usable conclusion. I'd love it if you could possibly help out,
I will probably edit my code later but for now im just using that codepen.io overused loading square, for your information.
If you can help, it'll be greatly appreciated, Here's my code.
Html
<!DOCTYPE html>
<html>
<head>
<style>html { overflow-y: hidden; }</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
s$("div.formSentMsg").delay(3200).fadeOut(300)
</script>
<div><center><i><p>Loading</p></i></center></div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div><span class="loader"><span class="loader-inner"></span></span></div>
</body>
</html>
Css
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
I understand,
As probably one of you it might be extremely easy for you to achieve this but when i receive your inputit's greatly appreciated and it helps me learn for future references,
Thanks. - David
Just remove the element that contains the loading stuff once all of your assets have loaded. I gave the loading element an ID (#loadingEl) and am using jQuery to remove it on $(window).on('load'...
body,
html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
<!DOCTYPE html>
<html>
<head>
<style>
html { overflow-y: hidden; }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("div.formSentMsg").delay(3200).fadeOut(300);
</script>
<div>
<center><i><p>Loading</p></i></center>
</div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="loadingEl"><span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on('load',function() {
$('#loadingEl').remove();
})
</script>
</body>
</html>