css 向上滑动

Posted 2021-05-13

/*fade in*/
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider .orbit__caption {
  animation: fadeIn 1.5s ease;
}

#block-core-slider-regular,
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider article,
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider h1 {
 animation: slideDown 1.5s ease; 
 position: relative;
}

main,
.footer,
[data-block-internal-id="core_slider_fullscreen"] .fullscreen-image-slider .orbit__caption .grid-x {
  position: relative;
  animation: slideUp 1.5s ease;
}

.path-frontpage .aw-content,
.path-frontpage .footer,
.not-front .layout-container {
  animation: fadeInSlow 1.5s ease;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeInSlow {
  0% {opacity: 0;}
  50% {opacity: 0.1;}
  100% {opacity: 1;}
}

@keyframes slideDown {
  from {top: -30px;}
  to {top: 0;}
}

@keyframes slideUp {
  from {bottom: -30px;}
  to {bottom: 0;}
}