So i inserted this line of code
<script>0</script>
in my html as adviced in some udemy answers and it indeed fixed an animations problem i had where the text instead of just coming on the center of the page, would make a small "jump" at the start and it was annoying. The script block fixed it.
Couldnt find any thread related to this.
My html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<!-- Should fix animations flickery -->
<script>
0;
</script>
<header class="header">
<div class="header__logo-box">
<img
src="./img/imgDestiny/destiny-logo-white.png"
alt="Logo"
class="header__logo"
/>
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Destiny</span>
<span class="heading-primary--sub">is your only limit</span>
</h1>
<div class="text-box--btn">
<a href="#" class="btn btn--white btn--animated">Discover your Fate</a>
</div>
</div>
</header>
</body>
</html>
Css:
/*
COLORS:
Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
*/
/*
COLORS2:
Light green: #10bcf0
Medium green: #556ac5
Dark green: #284db4
*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; /* Take border-box of the body and inherit to the universally selected elements */
}
html {
/* font-size: 10px; For people that need to increase the font size in order to read the page, pixels are not recommended */
font-size: 62.5%; /* % of the default 16px to get 10px*/
}
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
/* font-size: 16px; browser default */
line-height: 1.7;
color: #777;
padding: 3rem;
box-sizing: border-box;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(15, 187, 240, 0.75),
rgba(40, 77, 180, 0.75)
),
url(../img/imgDestiny/destiny-background.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75vh);
}
.header__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.header__logo {
height: 8rem;
}
.header__text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-box--btn {
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
backface-visibility: hidden; /* Fixes animations shaking */
margin-bottom: 6rem;
}
.heading-primary--main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 6.1rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
/*
animation-delay: 3s;
animation-iteration-count: 3;
*/
}
.heading-primary--sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 2.5rem;
animation: moveInRight 1s ease-out;
}
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(3rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.2s;
position: relative;
font-size: 1.6rem;
}
.btn:hover {
transform: translateY(-0.3rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.btn--white {
background-color: #fff;
color: #777;
}
.btn::after {
content: '';
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
.btn--white:after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn--animated {
animation: moveInBottom 0.5s ease-out 0.75s;
animation-fill-mode: backwards;
}
What happens: https://streamable.com/0vikac See without the script tags the text "jumps" up a bit at the start of animations.