css требуется помощь в анимации - PullRequest
Новая
       4

css требуется помощь в анимации

1 голос
/ 20 января 2020

Так что я довольно новичок в программировании, и я только начал с html, css, JavaScript и немного с php. Я пытался сделать выпадающее меню с анимацией. Это работает очень хорошо, но теперь я хочу добавить «обратную» анимацию для меню «Параметры», но я не могу заставить ее работать без воспроизведения «затухающей» анимации, когда параметры загружены. Я надеюсь, что моя проблема ясна, и я с нетерпением жду, чтобы найти кого-то, кто может помочь мне с моей проблемой. PS: я немец, так что извините за грамматические ошибки;)

index. html: 

<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template.css"/>
  <head>
    <title>Stephen's Site</title>
  </head>
  <body>
    <div id="menu1"><a href="https://www.instagram.com/stephen.scholz/"><font color="c079da">Instagram</font></a></div>
    <div id="menu2"><a href="https://www.youtube.com/channel/UCGJPfjc2i8qOVuEhChVYhBg?view_as=subscriber"><font color="da5148">Youtube</font></a></div>
    <div id="menu3"><a href="https://twitter.com/_stephen_scholz"><font color="68b9e1">Twitter</font></a></div>
    <div id="menu4"><a href="menutest.html"><font color="000">Menutest V2</font></a></div>
    <div id="bild1"></div>
    <div id="link1"><a href="testing.html"><font color=000">Menutest V1</font></a></div>
<!--    <div class="dropdown">
      <div class="dropdown-button">
        <a href="">Menu</a>
        </div>
        <ul>
          <li>Spalte 1</li>
          <li>Spalte 2</li>
          <li>Spalte 3</li>
          <li>Spalte 4</li>
        </ul>
        </div>
        -->
    <div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
  </body>
</html>

"menutest. html" (где находятся выпадающие элементы): 

<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template3.css"/>
  <head>
    <title>Stephen's Site</title>
  </head>
  <body>
    <div class="dropdown">
      <div class="dropdown-button">
        <a href="">Menu</a></div>
        <ul class="opt">
          <li><a href="index.html"><font color="000"<div id="opt1">Hauptseite</font></a></li>
          <li><a href="index.html"><font color="000"<div id="opt2">Hauptseite2</font></a></li>
          <li><a href="index.html"><font color="000"<div id="opt3">Hauptseite3</font></a></li>
          <li><a href="index.html"><font color="000"<div id="opt4">Hauptseite4</font></a></li>
        </ul>
        </div>
    <div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
  </body>
</html>

template3. css (css файл для выпадающего меню): 

    background-image: url(../images/background.png);
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    background-color: #F9EBAE;
    background-repeat: repeat-x;

}
#credit1 {
    font-size: 25px;
    width: 100px;
    height: 100px;
    margin-left: 5px;
    margin-top: 3400px;
    border: 3px solid #cfcecf;
}
.dropdown{
    margin: 0 auto;
    margin-top: 50px;
    width: 150px;
}
.dropdown-button {
    padding: 10px;
    background: white;
}
.dropdown-button a{
    color: #333;
    text-decoration: none;
    *border: 3px solid #cfcecf;
}
.dropdown ul{
    list-style-type: none;
    background: white;
    *border: 3px solid #cfcecf;
  animation: load 1s forwards;
}
.dropdown ul li{
    margin-top: 0px;
    padding: 10px 5px;
    *background: white;
    display: none;
    opacity: 0;
  animation: load 1s forwards
}
.dropdown:hover li{
    animation: load 0.3s forwards;
    display: block;
}
@keyframes load {
    0%{
        transform: scale(0) translateX(100px) rotate(-45deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) translateX(0px) rotate(0);
        /*box-shadow: 0px 0px 10px black;*/
    }
  0%{
    transform: scale(0) translateX(100px) rotate(-45deg);
  }
}
#opt1:hover {
  animation: opt 0.5s forwards;
  display: block;
}
#opt2:hover {
  animation: opt 0.5s forwards;
  display: block;
}
#opt3:hover {
  animation: opt 0.5s forwards;
  display: block;
}
#opt4:hover {
  animation: opt 0.5s forwards;
  display: block;
}
@keyframes opt{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.4);
  }
}
#opt1 {
  animation: optout 1s forwards;
  display: block;
  }
#opt2 {
  animation: optout 1s forwards;
  display: block;
  }
#opt3 {
  animation: optout 1s forwards;
  display: block;
  }
#opt4 {
  animation: optout 1s forwards;
  display: block;
  }

@keyframes optout {
  0%{
    transform: scale(1.4);
  }
  100%{
    transform: scale(1);
  }
}```
...