Question

我想通过页面加载上的标题来实现此站点（http://www.gasworks.org.uk/residencies/）上发生的事情：它会显示一秒钟然后消失。

他们在CSS中使用它：

.faded {
    opacity: 0;
    visibility: hidden;
}

.section-header {
    display: flex;
    height: 700px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: visibility 0s linear 1s, opacity 1s linear 0s;
    width: 100%;
    z-index: 98;
}

但我无法通过可见性和不透明度来实现这种转换。它什么都没有显示出来。

如果可能的话，我想用CSS实现这一点。我正在通过_S（http://underscores.me/）开发一个wordpress主题，我只熟悉HTML和CSS。

我已尝试过下面的CSS关键帧选项，但动画完成后会显示标题。

.site-title {
    -moz-animation-name: opacityTitle;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: opacityTitle;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;

    animation-name: opacityTitle;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1s;
}

@-moz-keyframes opacityTitle {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes opacityTitle {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
    }
}

@keyframes opacityTitle {
    0% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
    }
}

有什么想法吗？

非常感谢！ Robbert

Answer 1

基本上你只需要运行一次动画，在那里你可以将不透明度属性从1设置为0。

在显示概念的示例下方，您可以根据需要对其进行相应的更改。

/* animation code */
@keyframes splash-anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.splash {
  font-size: 80px;
  animation-name: splash-anim ; /* associate an animation*/
  animation-duration: 4s; /* give it some timing */
  animation-iteration-count: 1; /* run animation only once*/
  animation-timing-function: ease-in;
  animation-fill-mode: forwards; /* stop at last frame*/
}

<div class="splash">your text here!</div>

您可以在这里阅读更多内容： https://css-tricks.com/snippets/css/keyframe-animation-syntax/

页面加载时页眉消失

1 个答案: