Question 291083 in Html Question posted in
Some basic documentation can be found here.

Html – Transition css animation

Please tell me how to make that the animation was not smooth but clear. At once the text disappeared and immediately appeared.

I don’t need smooth animation!

EDIT: Right now the text goes out smoothly! I need the text to go out not smoothly, but sharply!

div {
  font-size: 100px;
  animation: time_block 1s infinite;
  transition: 0ms;
}
@keyframes time_block {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
<div>TEST</div>
Tags:

2

Answers


  1. 0

    You should start at opacity 0. Then you can use animation-direction:alternate to make the animation go from 0 to 1 and then back to 0.

    div {
  font-size: 100px;
  animation: time_block 1s infinite alternate ease-in-out;
  transition: 0ms;
}
@keyframes time_block {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
    <div>Test</div>
    Login or Signup to reply.
  2. 0

    You can increase the animation time to 2 or 3 secs and add the forwards value to animation-fill-mode so that it retains the values set by the final keyframe after the animation is completed.

    Here is the code :

    <html>
    <head>
        <style>
            div {
                font-size: 100px;
                animation: time_block 2s forwards;

            }
            @keyframes time_block {
                to {
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div>TEST</div>
    </body>
</html>

    Hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search