Изменить анимацию и положение контейнера

avatar
TheDeepVoiceGuy
1 июля 2021 в 20:04
24
1
0

body {
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(128,158,158);
}

/* Header navigation */
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-family: monospace;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
}

body, html { height: 100%; overflow: hidden;}
ul, ol { list-style: none; }

header {
  width: 100%;
  height: 16%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}

header nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

header nav .logo {
  color: #000000;
  font-size: 30px;
  padding: 20px 20px 10px 20px;

}

header nav .logo a {
    color: #000000;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
}

header nav li a {
  color: #000000;
  display: block;
  position: relative;
  padding: 20px 20px 10px;
  font-size: 15px;


}

header nav li a:before, header nav li a:after {
  content: "";
  bottom: 0;
  width: 0px;
  height: 2px;
  display: block;
  position: absolute;
  background-color: rgb(123, 200, 123);
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

header nav li a:before { right: 50%; }
header nav li a:after { left: 50%; }

header nav li a:hover:before , header nav li a:hover:after {
  width: 50%;
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }



@keyframes grow {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.6) rotate(10deg);}
}

@-webkit-keyframes grow {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.6) rotate(10deg);}
}

@media only screen and (max-width: 290px) {
  header nav ul {
    width: 100%;
    text-align: center;
    flex-direction: column;
  }
}
#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hex::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  /* =  width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hexLink {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  color: inherit;
  text-decoration: none;
}


/* HEX CONTENT */

.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}

.hex h1,
.hex p {
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
  transition: transform .2s ease-out, opacity .3s ease-out;
}

.hex h1 {
  bottom: 50%;
  padding-top: 50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}

.hex p {
  top: 50%;
  padding-bottom: 50%;
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}


/* HOVER EFFECT */

.hexLink:hover h1,
.hexLink:focus h1,
.hexLink:hover p,
.hexLink:focus p {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #fff;
}

a:not(.hexLink),
a:not(.hexLink):hover,
a:not(.hexLink):focus,
a:not(.hexLink):active {
  text-decoration: none;
  color: inherit;
}


/* HEXAGON SIZING AND EVEN ROW INDENTATION */

@media (min-width:100%) {
  /* <- 5-4  hexagons per row */
  #hexGrid {
    padding-bottom: 10%
  }
  .hex {
    width: 25%;
    /* = 100 / 5 */
  }
  .hex:nth-child(9n+6) {
    /* first hexagon of even rows */
    margin-left: 10%;
  }
}
.container-fluid {
  background: rgb(133, 173, 143);
  position: relative;
  height: 30%;;
  left: 0%
  bottom: 0;
  -webkit-animation: expand 1.5s;
  vertical-align: bottom;
}

@-webkit-keyframes expand{
    0%{ height: 0px }
    100%{ height: 30% }
}

#myDIV {

}


div {
    margin: 0;
    padding: 0;
}

.block {
    width: 100%;
    display: block;
}

.col-left {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.col-center {

}

.clear {
    clear:both;
}
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
  <header>
       <nav>
         <div class="logo"><a href="#">Title</a></div>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
  </header>

  <ul id="hexGrid">
        <li class="hex">
          <button onclick="myFunction(1, 'TEXT A')">
            Text example 1
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 1</h1>
                <p>Voorbeeld Hex 1</p>
              </a>
            </div>
          </button>
        </li>
        <li class="hex">
          <button onclick="myFunction(2, 'TEXT B')">
            Text example 2
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 2</h1>
                <p>Voorbeeld Hex 2</p>
              </a>
            </div>
          </button>
        </li>
        <li class="hex">
          <button onclick="myFunction(3, 'TEXT C')">
            Text example 3
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 3</h1>
                <p>Voorbeeld Hex 3</p>
              </a>
            </div>
          </button>
        </li>
        <li class="hex">
          <button onclick="myFunction(4, 'TEXT D')">
            Text example 4
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 4</h1>
                <p>Voorbeeld Hex 4</p>
              </a>
            </div>
          </button>
        </li>
    </ul>


    <div class="container-fluid">
      <div class"block">
        <div class="col left">
          <div id="myDIV2">
            <h1>
              Default
            </h1>
          </div>
        </div>
        <div class="col center">
          <div id="myDIV">
            Default text
          </div>
        </div>
      </div>
    </div>

</body>

</HTML>

Итак, я хочу, чтобы контейнер анимировался снизу вверх, но я не знаю, как прикрепить его к низу, и не знаю, как инвертировать анимацию, чтобы она двигалась вверх, а не вверх. стандартный вниз. Какой код мне нужно изменить/добавить, чтобы это произошло?

Источник

Ответы (1)

avatar
Spectric
1 июля 2021 в 20:10
0

Вы можете использовать margin-top следующим образом:

body {
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(128, 158, 158);
}


/* Header navigation */

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-family: monospace;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  overflow: hidden;
}

ul,
ol {
  list-style: none;
}

header {
  width: 100%;
  height: 16%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}

header nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

header nav .logo {
  color: #000000;
  font-size: 30px;
  padding: 20px 20px 10px 20px;
}

header nav .logo a {
  color: #000000;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
}

header nav li a {
  color: #000000;
  display: block;
  position: relative;
  padding: 20px 20px 10px;
  font-size: 15px;
}

header nav li a:before,
header nav li a:after {
  content: "";
  bottom: 0;
  width: 0px;
  height: 2px;
  display: block;
  position: absolute;
  background-color: rgb(123, 200, 123);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

header nav li a:before {
  right: 50%;
}

header nav li a:after {
  left: 50%;
}

header nav li a:hover:before,
header nav li a:hover:after {
  width: 50%;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

@keyframes grow {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.6) rotate(10deg);
  }
}

@-webkit-keyframes grow {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.6) rotate(10deg);
  }
}

@media only screen and (max-width: 290px) {
  header nav ul {
    width: 100%;
    text-align: center;
    flex-direction: column;
  }
}

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hex::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  /* =  width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hexLink {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  color: inherit;
  text-decoration: none;
}


/* HEX CONTENT */

.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}

.hex h1,
.hex p {
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
  transition: transform .2s ease-out, opacity .3s ease-out;
}

.hex h1 {
  bottom: 50%;
  padding-top: 50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}

.hex p {
  top: 50%;
  padding-bottom: 50%;
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}


/* HOVER EFFECT */

.hexLink:hover h1,
.hexLink:focus h1,
.hexLink:hover p,
.hexLink:focus p {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #fff;
}

a:not(.hexLink),
a:not(.hexLink):hover,
a:not(.hexLink):focus,
a:not(.hexLink):active {
  text-decoration: none;
  color: inherit;
}


/* HEXAGON SIZING AND EVEN ROW INDENTATION */

@media (min-width:100%) {
  /* <- 5-4  hexagons per row */
  #hexGrid {
    padding-bottom: 10%
  }
  .hex {
    width: 25%;
    /* = 100 / 5 */
  }
  .hex:nth-child(9n+6) {
    /* first hexagon of even rows */
    margin-left: 10%;
  }
}

.container-fluid {
  background: rgb(133, 173, 143);
  position: relative;
  height: 30%;
  ;
  left: 0%;
  bottom: 0;
  -webkit-animation: expand 1.5s;
  vertical-align: bottom;
}

@-webkit-keyframes expand {
  0% {
    margin-top: 30%;
    height: 0px
  }
  100% {
    margin-top: 0%;
    height: 30%
  }
}

#myDIV {}

div {
  margin: 0;
  padding: 0;
}

.block {
  width: 100%;
  display: block;
}

.col-left {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.col-center {}

.clear {
  clear: both;
}
<!DOCTYPE HTML>
<HTML>

<head>
</head>

<body>
  <header>
    <nav>
      <div class="logo"><a href="#">Title</a></div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <ul id="hexGrid">
    <li class="hex">
      <button onclick="myFunction(1, 'TEXT A')">
            Text example 1
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 1</h1>
                <p>Voorbeeld Hex 1</p>
              </a>
            </div>
          </button>
    </li>
    <li class="hex">
      <button onclick="myFunction(2, 'TEXT B')">
            Text example 2
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 2</h1>
                <p>Voorbeeld Hex 2</p>
              </a>
            </div>
          </button>
    </li>
    <li class="hex">
      <button onclick="myFunction(3, 'TEXT C')">
            Text example 3
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 3</h1>
                <p>Voorbeeld Hex 3</p>
              </a>
            </div>
          </button>
    </li>
    <li class="hex">
      <button onclick="myFunction(4, 'TEXT D')">
            Text example 4
            <div class="hexIn">
              <a class="hexLink" href="#">
                <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                <h1>Title 4</h1>
                <p>Voorbeeld Hex 4</p>
              </a>
            </div>
          </button>
    </li>
  </ul>


  <div class="container-fluid">
    <div class "block">
      <div class="col left">
        <div id="myDIV2">
          <h1>
            Default
          </h1>
        </div>
      </div>
      <div class="col center">
        <div id="myDIV">
          Default text
        </div>
      </div>
    </div>
  </div>

</body>

</HTML>