Home>

I want to apply border-radius in the final stage with the following animation
It will be applied from the beginning of the animation.
Specifically about .a, you can see that the upper right and lower right of border-radius: are rounded at the start.

1) Can you tell me why this problem occurs and how to solve it?

2) Although it works smoothly in JSFiddle, there is a crawl phenomenon on its own construction site, but is this a phenomenon that can definitely occur on CSS depending on the amount of pages to be read? ?

3) I want to display text on a when a reaches 100% (for example, 100%), but with keyframe animation (for example, at 100% timing) after content etc. Failed to set pseudo element for. Another way I can come up with is that I can only come up with a JQuery setTimeout with the same timeout with setTimeout, but I think that it is not necessarily guaranteed that 3S set with CSS and JQuery setTImeout3000 will work together Please give me advice if there is a good way.

Sorry for repeated questions
Thanks for your consideration.

JSFiddle

<div>
  <div>A</div>
  <div>B</div>
</div>
. main {
  width: 300px;
  height: 50px;
  display: flex;
}
.a {
  background: blue;
  width: 50%;
  border-radius: 5px 0px 0px 5px;
}
.b {
  background: red;
  width: 50%;
}
@keyframes my_anime1 {
  0% {
    width: 50%;
  }
  20% {
    width: 60%;
  }
  40% {
    width: 70%;
  }
  60% {
    width: 80%;
  }
  80% {
    width: 90%;
  }
  100% {
    width: 100%;
    border-radius: 0px 5px 5px 0px;// applied before 100%
  }
}
@keyframes my_anime2 {
  0% {
    width: 50%;
  }
  20% {
    width: 40%;
  }
  40% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  80% {
    width: 10%;
  }
  100% {
    width: 0%;
    border-radius: 0px 0px 0px 0px;
  }
}
.a {
  animation: my_anime1 3s linear forwards;
}
.b {
  animation: my_anime2 3s linear forwards;
}
css
  • Answer # 1

    Some stories before you get into the main subject

    First use@keyframes, but remember your past questions

    Smooth movement of keyframe animation and applied css after animation

    The contents of the frame do not need to be defined so often.
    This is because the middle point of the style is taken in nicely.

    If you just want to make a transition from the initial state like this time,

    @ keyframes anim {
      100% {
        background: green;
      }
    }


    The last frame is enough
    (width: 50%;is already specified as the initial value, so there is no need to specify it again here)

    There is no line comment (//) for commenting out in CSS.
    Please enclose/* like this. Otherwise an error will occur */

    And combine the selectors

    . a {
      background: blue;
      width: 50%;
      border-radius: 5px 0px 0px 5px;
    }
    .b {
      background: red;
      width: 50%;
    }
    .a {
      animation: my_anime1 3s linear forwards;
    }
    .b {
      animation: my_anime2 3s linear forwards;
    }


    In this way, writing the same selector multiple times only makes it difficult to grasp the whole picture

    Main topic
    @ keyframes my_anime1 {
      100% {
        width: 100%;
        border-radius: 0px 5px 5px 0px;
        / * Applied before 100% * /
      }
    }


    That is natural. As mentioned above, it is@keyframesthat applies the initial value, each frame, and the intermediate style between frames in a good way

    The following is a slightly edited version of the numerical values, etc., to make the demo easy to understand.

    . main {
      width: 100px;
      height: 50px;
      display: flex;
    }
    .a {
      background: blue;
      width: 50%;
      border-radius: 20px 0 0 20px;
      animation: my_anime1 3s linear infinite;
    }
    .b {
      background: red;
      width: 50%;
      animation: my_anime2 3s linear infinite;
    }
    @keyframes my_anime1 {
      100% {
        width: 100%;
        border-radius: 0 20px 20px 0;
        / * Applied before 100% * /
      }
    }
    @keyframes my_anime2 {
      100% {
        width: 0;
        border-radius: 0;
      }
    }



    Theborder-radius: 0 20px 20px 0;part in question isnice
    If you look at the gif animation,border-radiusof.ais
    From the initial valueborder-raius: 20px 0 0 20px;(upper left and lower leftonlyrounded corners)
    border-raius: 0 20px 20px 0;(upper right and lower rightonlyrounded circles) in the last frame

    That means nothing strange has happened,
    border-radius: 0 20px 20px 0;is in line with the specification in@keyframes

    However, if the phrase "applied before 100%" means "I want the style to be applied when 100% is reached", a littleThe specification of @keyframesmust be subdivided. For example:

    @ keyframes my_anime2 {
      99.9% {
        border-radius: 20px 0 0 20px;/* Keep border-radius style just before * /
      }
      100% {
        width: 100%;/* width transitions as usual * /
        border-radius: 0 20px 20px 0;/* Change instantly at 100% * /
      }
    }


    CSS is a "Cascading Style Sheet", that is, a style sheet that is applied in order from the top like a waterfall
    The latest styling that has been loaded or executed will be displayed as "overwritten"
    On text files, the style written at the bottom is easier to apply

    So if you want to remove the initial rounded corners, you need to rewrite.aor do this

    @ keyframes my_anime2 {
      0% {
        border-radius: 0;/* Overwrite initial state * /
      }
      99.9% {
        border-radius: 0;/* No rounded corners just before * /
      }
      100% {
        width: 100%;/* width doesn't have to be written many times ∵ Since the middle of the initial value (50%) is specified arbitrarily * /
        border-radius: 0 20px 20px 0;
      }
    }
    Did you understand how to use

    @keyframes?


      

    Can you tell me why this problem occurs and how to solve it?

    As mentioned above. Specification

      

    Although it works smoothly in JSFiddle, there is a crawl phenomenon on its own construction site. Is this a phenomenon that can occur on CSS depending on the amount of pages to be read?

    Even if it's not CSS, it will naturally get stuck if it is heavily processed in other parts (sometimes even on sites where CSS animation is applied)

      

    I also want to display text on a when a reaches 100% (for example, 100%), but with keyframe animation (for example, at 100% timing) The element could not be set. Another way I can come up with is that I can only come up with a JQuery setTimeout with the same timeout with setTimeout, but I think that it is not necessarily guaranteed that 3S set with CSS and JQuery setTImeout3000 will work together Please give me advice if there is a good way.

    Write the style. More

    /* Even if you specify ".a", the pseudo-element does not move->Specify ".a :: after" * /
    .a :: after {
      content: '';
      animation: show_after 3s linear forwards;
    }
    @keyframes show_after {
      99.9% {
        content: '';
      }
      100% {
        content: "[msg]";
        color: #fff;
      }
    }


  • Answer # 2

    1)

    .a {
      background: blue;
      width: 50%;
      border-radius: 5px 0px 0px 5px;
    }


    In the first place, 5px is specified in the upper right and lower right, so it is natural to round.

    2) Since reading and execution are usually separated, it seems that it is considered that another CSS is involved, but since the original code is not understood, anything.

    3) For example, this can be achieved by trying this way.

    <div>A
      <div>C</div>
    </div>
    . c {
      visibility: hidden;
      animation: my_anime3 0s linear 3s forwards;
    }
    @keyframes my_anime3 {
      100% {
        visibility: visible;
      }
    }