css Question posted in
Some basic documentation can be found here.

Can I simplify a CSS keyframes/animation using transition?

Here’s my CSS that highlights :target pseudo-elements with a green background, then fades out the background over four seconds:

@keyframes highlight {
    0% {
        background: green
    }
    100% {
        background: none;
    }
}

:target {animation: highlight 4s;}

Can this be simplified, by using transition?

Tags:

2

Answers


  1. 0

    One hacky idea that crossed my mind (I will probably find a better one later)

    :target {
  /* from green to transparent and the transparent need to stop at 99% 
     99% = 100%*(1 - 100/10000)
  */
  background-image: linear-gradient(green,#0000 99%);
  background-size: 100% 10000%; /* a big height gradient 100 x height */
  /* the default position is  0 0 (equivalent to top) so I make it bottom with a transition */
  background-position: bottom;
  transition: background-position 4s;
}

#id {
  height: 100px;
}
    <a href="#id"> click </a>

<div id="id"></div>
    Login or Signup to reply.
  2. 0

    You could try to make the target element become transparent by using opacity:0 or change the element’s background color with opacity background-color:rgba(0,128,0,0)

    #target-div{
  background-color:green;
  min-height:100px;
  margin-top:40px;
  transition: all 4s ease-out;
  color:white;
}

#target-div:target{
  opacity:0;
}
    <a href="#target-div">Go</a>

<div id="target-div"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search