i use firefox as default browser and i never had problem with animations and css in general everything worked fine, but i noticed that in chrome if i have hover effect that has more than one animation, in chrome animations happen in order instead of simultaneously. how can i fix that problem? also the input slider i tried to make it vertical ( works fine in firefox but in chrome it doesn't work at all.
here is the github pages of the page
* {
box-sizing: border-box;
user-select: none;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #bf42f5;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
canvas {
opacity: 0;
touch-action: none;
animation: fade-in 1s ease 0.5s forwards;
}
.nav{
position: fixed;
opacity: 1;
z-index: 10;
top: 0px;
left: 0px;
min-width: 100%;
}
.nav-list{
list-style: none;
font-size: 1.6rem;
font-family: 'Courier New', Courier, monospace;
color: #f0f0f0;
display: flex;
justify-content: center;
padding: 0;
}
.nav-list>li{
padding-right: 10px;
opacity: 0.8;
}
.nav-list>li:hover{
transition: all 0.4s ease;
opacity: 1;
cursor: pointer;
scale: 1.11;
padding-bottom: 100px;
}
@media (max-width:480px) {
.nav-list{
flex-direction: column;
align-items: flex-end;
/* transform: translateX(1000px); */
}
.nav-list>li{
padding-left: 5px;
}
.nav-list>li:hover{
padding-top:5px;
padding-bottom:5px;
padding-left: 15px;
scale: 1.05;
}
}
/*slider*/
.boring-text{
position: fixed;
left: 5%;
top: 25%;
}
.boring-text>h1{
font-size: clamp(2rem, 10vw, 5rem);
font-family: 'Sono', sans-serif;
color: #ffffff9a;
pointer-events: none;
font-weight: 200;
max-width: 5ch;
}
.boring-text>h3{
font-family: 'Marhey', cursive;
color: #ffffff92;
position: fixed;
right: 10px;
bottom: 5%;
}
.boring-text>h4{
font-family: 'Sono', sans-serif;
color: #ffffffba;
}
.slider-wrapper{
position: fixed;
right: 20px;
bottom: 10%;
}
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
-webkit-appearance: none;
width: 5px;
height: 255px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
/*slider*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Marhey:wght@300;400&family=Sono:wght@200;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>LandingPAGE</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class='nav'>
<div class='nav-wrapper'>
<ul class='nav-list'>
<li>Shop</li>
<li>Work</li>
<li>
apple{/* <FontAwesomeIcon icon="apple" /> */}
</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class='boring-text'>
<h1> boring landing pages</h1>
<h3> phones: {val}</h3>
<h4> React - Three</h4>
<div class='slider-wrapper'>
<input type="range" orient="vertical" min="1" max="50" value='10' class='slider' />
</div>
</div>
</div>
</body>
</html>
CodePudding user response:
About the slider you can check this answer, it may help you.
About the animations I'm waiting for further information as I reproduce it on your snippet I'm seeing it working well and concurrently.