Я использую свойство CSS content для добавления содержимого перед тегом html.

span::before {
    content: 'content that needs a delay';
}
<span></span>

Есть ли способ задержать видимость контента (с помощью CSS)?

7
Sampath Liyanage 7 Сен 2016 в 07:50

3 ответа

Лучший ответ
span::before {
    content: 'content that needs a delay';
     margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
<span></span>
8
Gowtham 7 Сен 2016 в 05:00

Попробуйте css-animation

span::before {
  content: 'content that needs a delay';
  opacity: 0;
  animation: 2s fadeIn;
  animation-fill-mode: forwards;
  transition: opacity 1.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<span></span>
2
Jinu Kurian 7 Сен 2016 в 05:32

Используйте CSS animation с css animation-fill-mode:forwards, иначе после завершения анимации он скроет ваш контент.

span::before {
    content: 'content that needs a delay';
    -webkit-animation:0.6s opc forwards;
    opacity:0;
    transition:opacity 0.6s;
}

@-webkit-keyframes opc{
 from{
   opacity:0;
 }
 to{
   opacity:1;
 }
}
<span></span>
0
frnt 7 Сен 2016 в 07:29