'CSS content with delay

I'm using CSS content property to add content before an html tag. 

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

Is there a way to delay the visibility of the content (with CSS)?

htmlcss


Solution 1:[1]

span::before {
    content: 'content that needs a delay';
     margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 4s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
<span></span>

Solution 2:[2]

Try 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>

Solution 3:[3]

Use CSS animation with css animation-fill-mode:forwards or else after completion of animation it will hide your content.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Renaat De Muynck
Solution 2
Solution 3

Related Questions