The animation lowers the height of the h1 and then once the animation is completed, it snaps back into position.
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
Avoid not checking the whole code before posting it here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
border: white solid 1px;
}
.header-container {
display: flex;
justify-content: space-between;
position: relative;
}
.main-nav {
display: flex;
}
.main-nav li {
list-style-type: none;
}
h1.main-header {
position: absolute;
top: 40%;
left: 50%;
transition: left, top;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
transform: translateX(150px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Hello World!</title>
</head>
<body>
<header class="wrap">
<nav class="header-container">
<h2 class="header-text">
Text
</h2>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="main-header">
This is a header
</h1>
</header>
</body>
</html>
This should work as expected. Note the different use of transform: translate; and transition: left, top;, since transform: translate; is used to move the object for defined value(here 50% both X and Y) and you haven't set the returning position to match starting point, thus I've made it simple and used transition: left, top; and changed only value of X to move right then return left.
this happening because of translate(-50% ,-50%) wich is replaced by aniamtion transform.
if you want to center your header you can use flex display on the header parent like this:
.main-header {
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-repeat:infinite;
animation-iteration-count: infinite;
}
.wrap {
background-color: gray;
height: 90vh;
display:flex;
align-items:center;
justify-content:space-around
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
because you have specific height:90vh on your .wrap parent you can use align-items:center for vertical align the header and justify-content work for horizontal align.
You just need to use animation-fill-mode:forwards; check MDN for the property details.
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:forwards;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
Related
I am trying to animate the joining of two text halves. I came up with this code, but it doesn't adapt to different screen sizes, what can I do to fix it ?
.ab {
position: relative;
animation-name: ab;
animation-duration: 10s;
animation-iteration-count:1;
animation-direction: alternate;}
#keyframes ab {
0% {left:0px; top:0px;}
25% { left:350px; top: 0px;}
}
.ba {
text-align : right;
position: relative;
animation-name: ba;
animation-duration: 10s;
animation-iteration-count:1;
animation-direction: alternate;}
#keyframes ba {
0% { right:0px; top:0px;}
25% {right:350px; top: 0px;}
}
.column{
float: left;
margin: 10px;
width: 45%;
}
<div class='row'>
<div class="ab column"> Bienvenue </div>
<div class="ba column"> deuxieme </div>
</div>
You have to use a responsive unit of measure. px is not one of those. I used % in my example here:
Watch out: I had to use transform: translate to fully align the absolute positioned items.
// this ACTUALLY centers the element
.absolute-item{
position: absolute;
left: 50%;
transform: translate(-50%, 0); // translate(x, y)
}
.row{
width: 100%;
background: #333;
height: 50px;
border-radius: 10px;
color: white;
font-family: sans-serif;
position:relative;
}
.column{
position: absolute;
top: 50%;
}
.ab{
color: green;
animation: ab 2s ease-in-out infinite alternate;
}
.ba{
color: red;
animation: ba 2s ease-in-out infinite alternate;
}
#keyframes ab {
0% {
left: 5%;
transform: translate(0%, -50%);
}
100% {
left: 50%;
transform: translate(-50%, -50%);
}
}
#keyframes ba {
0% {
right: 5%;
transform: translate(0%, -50%);
}
100% {
right: 50%;
transform: translate(50%, -50%);
}
}
<div class="row">
<div class="ab column">Bienvenue</div>
<div class="ba column">deuxieme</div>
</div>
so I am a html and css starter, I wanted to make this cool startup animation which when hovered will rotate and expand like in the code and later I am planing to add a button in between. Till now it works fine but I am stuck on how can I reverse animate it to close, when the mouse in not hovering and also the code is very lengthy so is there a way to make it shorter.
↑ I know this isn't the best explanation. so if you dont understand just run the code and maybe you'll get it.
/*
=======================
Variable
=======================
*/
:root {
/* -----colors----- */
--clr-blue-1: #0C164F;
--clr-blue-2: #5643FD;
--clr-purple-1: #0D0717;
--clr-purple-2: #1D1135;
--clr-purple-3: #7649FE;
--clr-gray-1: #B9A2FE;
--clr-white: #FCFBFE;
--clr-pink-1: #BA1E68;
/* -----fonts----- */
--ff-primary: 'Barlow', sans-serif;
--ff-secondary: 'Nova Square', cursive;
/* --cross animation-- */
--cross-animation-time: 1s;
--cross-opacity: 0.6;
/* -----other----- */
--transition: all 0.3s linear;
--spacing: 0.25rem;
}
/*
=======================
Global CSS
=======================
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background-color: var(--clr-white);
color: var(--clr-purple-1);
line-height: 1.5;
font-size: 0.875rem; /* 14 px */
}
a {
text-decoration: none;
}
img {
display: block;
width: 100%;
}
h1,h2,h3,h4,h5 {
text-transform: capitalize;
letter-spacing: var(--spacing);
margin-bottom: 0.75rem;
line-height: 1.25;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 0.875rem; }
p { margin-bottom: 1.25rem; }
.clearfix::after, .clearfix::before{
content: "";
clear: both;
display: table;
}
#media screen and (min-width: 800px) {
h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1rem; }
}
/*
=======================
Header Section
=======================
*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://wallpaperaccess.com/full/17520.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.head-arrows {
background: var(--clr-white);
opacity: 0.4;
display: inline-block;
}
.inline-breaker {
display: block;
}
.arrow-left, .arrow-right {
display: inline-block;
}
.arrow-left {
margin-right: 1.5rem;
}
.arrow-right {
margin-left: 1.5rem;
}
.arrow-up-left {
width: 1.5rem;
height: 6rem;
transform: skewY(45deg);
/* animation: CrossUpLeft 1s ease-in-out 1; */
}
.banner:hover .arrow-up-left {
animation: CrossUpLeft var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-up-right {
width: 1.5rem;
height: 6rem;
transform: skewY(-45deg);
/* animation: CrossUpRight 1s ease-in-out 1; */
}
.banner:hover .arrow-up-right {
animation: CrossUpRight var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-left-up {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(45deg);
}
.banner:hover .arrow-left-up {
animation: CrossLeftUp var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-left-down {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(-45deg);
}
.banner:hover .arrow-left-down {
animation: CrossLeftDown var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-right-up {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(-45deg);
}
.banner:hover .arrow-right-up {
animation: CrossRightUp var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-right-down {
display: block;
width: 6rem;
height: 1.5rem;
transform: skewX(45deg);
}
.banner:hover .arrow-right-down {
animation: CrossRightDown var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-down-left {
width: 1.5rem;
height: 6rem;
transform: skewY(-45deg);
}
.banner:hover .arrow-down-left {
animation: CrossDownLeft var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
.arrow-down-right {
width: 1.5rem;
height: 6rem;
transform: skewY(45deg);
}
.banner:hover .arrow-down-right {
animation: CrossDownRight var(--cross-animation-time) ease-in-out 1;
animation-fill-mode: forwards;
}
/*
=======================
Animation Section
=======================
*/
#keyframes CrossUpLeft {
5% {
transform: translate(0rem,-1rem) skewY(45deg);
}
50% {
transform: translate(-6rem,4.5rem) skewY(45deg);
}
95% {
transform: translate(0rem,15rem) skewY(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,13rem) skewY(45deg);
}
}
#keyframes CrossUpRight {
5% {
transform: translate(0rem,-1rem) skewY(-45deg);
}
50% {
transform: translate(-6rem,4.5rem) skewY(-45deg);
}
95% {
transform: translate(0rem,15rem) skewY(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,13rem) skewY(-45deg);
}
}
#keyframes CrossLeftUp {
5% {
transform: translate(-1rem,0) skewX(45deg);
}
50% {
transform: translate(4.5rem,6rem) skewX(45deg);
}
95% {
transform: translate(15rem,0) skewX(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(13rem,0) skewX(45deg);
}
}
#keyframes CrossLeftDown {
5% {
transform: translate(-1rem,0) skewX(-45deg);
}
50% {
transform: translate(4.5rem,6rem) skewX(-45deg);
}
95% {
transform: translate(15rem,0) skewX(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(13rem,0) skewX(-45deg);
}
}
#keyframes CrossRightUp {
5% {
transform: translate(1rem,0) skewX(-45deg);
}
50% {
transform: translate(-4.5rem,-6rem) skewX(-45deg);
}
95% {
transform: translate(-15rem,0) skewX(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(-13rem,0) skewX(-45deg);
}
}
#keyframes CrossRightDown {
5% {
transform: translate(1rem,0) skewX(45deg);
}
50% {
transform: translate(-4.5rem,-6rem) skewX(45deg);
}
95% {
transform: translate(-15rem,0) skewX(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(-13rem,0) skewX(45deg);
}
}
#keyframes CrossDownLeft {
5% {
transform: translate(0,1rem) skewY(-45deg);
}
50% {
transform: translate(6rem,-4.5rem) skewY(-45deg);
}
95% {
transform: translate(0,-15rem) skewY(-45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,-13rem) skewY(-45deg);
}
}
#keyframes CrossDownRight {
5% {
transform: translate(0,1rem) skewY(45deg);
}
50% {
transform: translate(6rem,-4.5rem) skewY(45deg);
}
95% {
transform: translate(0,-15rem) skewY(45deg);
}
100% {
opacity: var(--cross-opacity);
transform: translate(0,-13rem) skewY(45deg);
}
}
<!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">
<!-- ----------------------------CSS link--------------------------- -->
<link rel="stylesheet" href="style.css">
<!-- --------------------------Google fonts------------------------- -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#300;400;500&family=Nova+Square&display=swap" rel="stylesheet">
<!-- --------------------------Font Awesome------------------------- -->
<link rel="stylesheet" href="C:\Users\com\Desktop\AFFAN\VisualStudio Codes\ICONS\fontawesome-free-5.15.4-web\css\all.css">
<title>Index</title>
</head>
<body>
<!-- ---------------------------
Header section
---------------------------- -->
<header class="header">
<div class="banner">
<div class="head-arrows arrow-up-left"></div><div
class="head-arrows arrow-up-right"></div><div class="inline-breaker"></div><div class="arrow-left">
<div class="head-arrows arrow-left-up"></div>
<div class="head-arrows arrow-left-down"></div>
</div><div class="arrow-right">
<div class="head-arrows arrow-right-up"></div>
<div class="head-arrows arrow-right-down"></div></div><div
class="inline-breaker"></div><div
class="head-arrows arrow-down-left"></div><div
class="head-arrows arrow-down-right"></div>
</div>
</header>
</body>
</html>
So I've got two custom mouse cursors that I'd like to keep at all times. The first cursor is a face, and the second is a face with an open mouth, it switches to the second one when the user clicks.
My problem is that when the user hovers over a certain object, like a div class, then the custom cursor disappears and it reverts to the default cursor.
How would I fix this problem?
The code for the cursor is in my CSS document.
Screenshots: https://i.imgur.com/P8ceHUo.jpeg, https://i.imgur.com/HSNLXpb.jpeg, https://i.imgur.com/VUd5BKx.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>
Below the CSS for my default cursor overrides I always use. I added your cursor as an example (can't test if it works, though), modify them to your needs as required.
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
You can use universal selector * to make it work on every :hover element (obviously you will need to just change url for yours):
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO (just click to see the active)
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>
Problem
I've made a simple css animation, but it's not behaving as I expect it.
The idea is for the animation to draw a straight line (from top downwards) , and the disappear (also from the top downwards).
The start of the line moves down a bit, as the animation starts, then up again to stay at set position (same goes for the bottom at the end of the animation).
Question
How do I get the start of the line to stay at one position instead of 'bouncing' down and up?
Expected behavior
Actual behavior
Code
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.lineWrapper .line {
width: 100%;
height: 100%;
background: #000;
animation: scrollLine 5s linear infinite;
}
#keyframes scrollLine {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0);
transform-origin: top;
}
30% {
transform: scaleY(1);
}
70% {
transform: scaleY(1);
}
90% {
transform: scaleY(0);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
Codepen
https://codepen.io/strazan/pen/RwPYgjq
The default transform-origin is center so if you omit it in the initial and last state it will be set to center. You need to also have an instant change of the transform-origin in the middle:
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.line {
height: 100%;
background: #000;
animation: scrollLine 5s infinite;
}
#keyframes scrollLine {
0%,10% {
transform: scaleY(0);
transform-origin: top;
}
49.9% {
transform: scaleY(1);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: bottom;
}
90%,100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
I have made similar CSS animation with some different code lines.
body {
margin: 0px;
display: flex;
justify-content: center;
background: black;
overflow: hidden;
}
.line-wrapper {
height: 800px;
width: 8px;
background: tranparent;
display: flex;
justify-content: center;
animation: down 2s linear infinite;
}
#keyframes down {
0% {
transform: translateY(0px);
}
15% {
transform: translateY(0px);
}
30% {
transform: translateY(0px);
}
60% {
transform: translateY(90px);
}
90% {
transform: translateY(115px);
}
100% {
transform: translateY(115px);
}
}
.line {
height: 8px;
width: 4px;
background: Gray;
animation: scrollLine 2s ease-in-out infinite;
}
#keyframes scrollLine {
100% {
height: 800px;
}
}
.eraser {
height: 0px;
width: 4px;
background: black;
animation: rmv 2s linear infinite;
}
#keyframes rmv {
55% {
height: 0px;
}
100% {
height: 800px;
}
}
<div class="line-wrapper">
<div class="line">
<div class="eraser"></div>
</div>
</div>
I'm trying to center something horizontally and vertically using flexbox as described Here ( click "Both Horizontally and Vertically" => then click "Can you use flexbox?")
.parent_test {
display: flex;
justify-content: center;
align-items: center;
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
<h1>centering-css-complete-guide/#both-flexbox
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>
But why isn't it centering vertically? JSBin
you need to specify a height for parent, in order to make it vertically aligned.
body {
margin: 0
}
.parent_test {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
}
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 20%;
background-color: green;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<div class="parent_test">
<div class="sk-double-bounce">
<div class="sk-child sk-double-bounce1"></div>
<div class="sk-child sk-double-bounce2"></div>
</div>
</div>
If you inspect the output, you'll see .sk-double-bounce is actually centered within .parent_test. The problem is that .parent_test has way lesser height. ( It only takes the amount of height required by it's content plus padding and border values).
You can now understand why the solution by #dippas works. If you want, you could remove the .parent_test wrapper, put flex rules in body, set body's height to 100vh and then put .sk-double-bounce div directly inside body. That would do the same job.