Блог

Главная - Вопросы по программированию - Перевести анимацию CSS, которая не работает должным образом (скачет / отстает)

Перевести анимацию CSS, которая не работает должным образом (скачет / отстает)

#html #css #css-animations

#HTML #css #css-анимации

Вопрос:

Я создаю веб-сайт с различными разделами, которые входят и выходят из screenview, чтобы попасть поверх основного div; те, которые идут сверху и слева, хорошо выполняют свою работу, сдвигаясь по щелчку и возвращаясь из screenview по щелчку.

Но нижняя и правая анимация скачут или отстают в зависимости от браузера. Кто-нибудь может мне помочь и выяснить, что я делаю не так?

(Я ищу решения только для css, поскольку я не разбираюсь в Java или PHP, я совсем новичок в кодировании)

 html{
background-color: #CEF1E8;}


body{margin: 0;
 padding: 0;
background-color: #CEF1E8;
overflow: hidden;}


.nav-top {
display: block;
position: fixed;
width: 100vw;
text-align: center;
z-index: 2; }

.nav-down {
position: fixed;
bottom: 0;
width: 100vw;
text-align: center;
z-index: 2; }

.nav-left{display: auto;
position: absolute;
z-index:2;
top:0;
left:0;
height: 100%;
text-align: center;
writing-mode: vertical-rl;
transform: translate(1.6vw);
margin: 0 auto;
z-index: 2; }

.nav-right{position: absolute;
display: inline-block;
top:0;
right: 0;
height: 100%;
text-align: center;
writing-mode: vertical-rl;
transform: rotate(180deg) translate(1.6vw);
transform-origin: center;
z-index: 2; }


.menu-top {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-top { font-size: 2.5vw;}}

.menu-contact {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-contact { font-size: 2.5vw;}}

.menu-about {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-about { font-size: 2.5vw;}}

.menu-work {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-work { font-size: 2.5vw;}}


.menu-home {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #CEF1E8;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-home { font-size: 2.5vw;}}

.panel#home {
  z-index: 1;
  background: #CEF1E8;
    canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block; 
    }
}

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  z-index: 500;
  box-sizing: border-box; 
}

.panel#slice {
  background-color: pink;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%); 
}

.panel#slice:target {
  transform: translateY(0);
  -webkit-transform: translateY(0); 
}

.panel#slice2 {
  background-color: #FFF7C8;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform-origin: 100% 100% 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.panel#slice2:target {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

.panel#slice3 {
  background-color: #FE632D;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.panel#slice3:target {
  transform: translateX(0);
  -webkit-transform: translateX(0); 
}

.panel#slice4 {
  background-color: #005248;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateY(100%);
  -webkit-transform: translateY(100%); 
}

.panel#slice4:target {
  transform: translateY(0);
  -webkit-transform: translateY(0);  
}

/* and aditionaly some delays animation, don't know if it's relevant */

.panel-content {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-top: -5%; 
}

.panel:target .panel-content {
  margin-top: 0; 
}

.panel-content2 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-right: -5%; 
}

.panel:target .panel-content2 {
  margin-right: 0; 
}

.panel-content3 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-left: -5%; 
}

.panel:target .panel-content3 {
  margin-left: 0; 
}

.panel-content4 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-bottom: -5%; 
}

.panel:target .panel-content4 {
  margin-bottom: 0; 
}
  
 <!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="menuphone.css">
    <meta charset="UTF-8">
    <meta name="description" content="Alizée Laurent, graphic designer and illustrator, welcome to my website!">
    <meta name="author" content="Alizée Laurent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
<header>
        
</header>
    
<main>
    
<div class="nav-top"> <a class="menu-top" href="#slice" data-hover="Slice">top</a> </div>
<div class="nav-left"><a class="menu-contact" href="#slice3" data-hover="Slice3">Contact</a></div>
<div class="nav-right"><a class="menu-about" href="#slice2" data-hover="Slice2">About me</a></div>  
<div class="panel" id="home">
    <h1 class="name-home">Alizée Laurent</h1>
</div>
<div class="nav-down"><a class="menu-work" href="#slice4" data-hover="Slice4">Work</a></div>



<div class="panel" id="slice">
    <div class="panel-content">
            <h3>holli</h3>
    </div>
    <div class="nav-right"><a class="menu-home" href="#home" >Homepage</a></div>
</div>
    
<div class="panel" id="slice2">
    <div class="panel-content2">
            <h3>More about me</h3>
    </div>
    <div class="nav-left"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

    
<div class="panel" id="slice3">
    <div class="panel-content3">    
        <h3>contact</h3>
    </div>
    <div class="nav-right"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

    
<div class="panel" id="slice4">
    <div class="panel-content4">
        <h3>work</h3>
    </div>  
    <div class="nav-top"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

   
</main>
</body>
</html>

Комментарии:

1. к сожалению, я не могу воспроизвести ошибку с указанным кодом. Анимация или кнопки не запускаются даже после слияния.

2. Как это анимируется? Я скопировал ваш код в codepen, и ничего не анимировалось.

3. Я думаю, что задающий вопрос означает, что они хотят, чтобы прокрутка была плавной, что можно сделать, добавив scroll-behavior: smooth; к html тегу в вашем файле css.

4. @Ameer, я так не думаю, в CSS есть код перехода, но для воспроизведения всей проблемы не хватает многих жизненно важных частей кода.

5. Извините, я добавлю остальную часть кода, мне было достаточно, чтобы увидеть ошибку!