Я использую свойство CSS content для добавления содержимого перед тегом html.Содержание CSS с задержкой
span::before {
content: 'content that needs a delay';
}<span></span>Есть ли способ, чтобы задержать видимость содержания (с CSS)?
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>Попробуйте 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>Согласно MDN, свойство видимости является незаменимым, но оно анимируется как один шаг от невидимого до видимого –
ikr. просто хотел подчеркнуть важность использования анимации css для его желаемого эффекта. использование непрозрачности сделает работу. –
Использование 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>Вы также можете анимировать 'max-width' от 0 до чего-то большого с' overflow: hidden' или 'transform: translateX' от чего-то большого до 0 или любого другого –
@DenisSheremet, это правда, есть много таких опций, которые мы можем использовать , но при установке непрозрачности 0 мы не скрываем этот элемент, а просто уменьшаем его непрозрачность. Если вы скрываете элемент и у вас есть какой-то элемент поблизости, значит, соседний элемент занимает ваше место и при загрузке, то есть во время выполнения анимации вы можете видеть, что соседний элемент перемещается вправо, попробуйте вы получите мою точку :-) – frnt
я не думаю, что вы можете сделать это с помощью CSS. вы можете использовать функцию jquery «show» для этого. http://api.jquery.com/show/ см. здесь –
@AksheyBhat Вы не можете использовать JS для псевдоэлементов, поскольку они не находятся в DOM. –