关键帧动画从中心出现

问题描述

我创建一个关键帧过渡序列。我想圆出现两秒钟，然后明星出现其他两秒钟。我遇到了几个问题。

1. 为什么我的明星变成一个矩形，在动画的结束？




2. 我怎样才能从中心出现，而不是在左上角的对角线滑动的明星？




3. 为什么我的红色圆圈消失一两秒钟，然后明星出现？

有谁知道我做错了？

\r

\r

{体\r
  背景颜色：＃F5F5F5;\r
  颜色：＃555;\r
  字体大小：1.1em;\r
  FONT-FAMILY：'拉托'，无衬线;\r
}\r
.star {\r
  背景颜色：＃f1c40f;\r
  颜色：白色;\r
  宽度：250像素;\r
  高度：250像素;\r
  保证金：30PX汽车;\r
  文本对齐：理由;\r
  -webkit-动画名称：例如， / *浏览器，Safari浏览器，歌剧* /\r
  -webkit-动画持续时间：4秒/ *浏览器，Safari浏览器，歌剧* /\r
  -webkit-动画迭代计数：1向前; / *浏览器，Safari浏览器，歌剧* /\r
  动画名称：例如，\r
  动画持续时间：4秒\r
  动画迭代-数：1向前;\r
}\r
/ *浏览器，Safari浏览器，歌剧* /\r
\r
@ -webkit-关键帧例如{\r
  0％，49％{\r
    背景色：红色;\r
    左：0像素;\r
    顶：0像素;\r
    高度：50像素;\r
    宽度：50像素;\r
    边界半径：50％;\r
  }\r
  50％\r
  100％{\r
    形状里面：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r
    形状填充：10px的;\r
    / *跃迁：全1​​轻松自如; * /\r
    -webkit-夹路径：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r
  }\r
  / *标准语法* /\r
  例如@keyframes {\r
    0％，49％{\r
      背景色：红色;\r
      左：0像素;\r
      顶：0像素;\r
      高度：50像素;\r
      宽度：50像素;\r
      边界半径：50％;\r
    }\r
    50％\r
    100％{\r
      形状里面：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r
      形状填充：10px的;\r
      / *跃迁：全1​​轻松自如; * /\r
      -webkit-夹路径：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r
    }\r
  }

\r

＆LT; D​​IV CLASS =明星＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

That's because what probably is a typo error in the below line. You have set forwards to the iteration count property and so the animation-fill-mode takes its default value (which is none). This makes the div.star to snap back to its original shape (the one before start of the animation, a square) once the animation has completed. Removing the forwards from the below line and setting it to the correct property will solve this issue.

animation-iteration-count: 1 forwards;

---

Well, getting the star to appear from center (as though its growing) is going to be almost impossible. I will explain the why part a bit later but why the star looks like it is sliding in diagonally is rather simple to explain. The element's initial dimension is 250x250, once the animation starts it is 50x50 and stays that way till 49% of the animation. At 50% no height or width is specified and so the element starts to grow gradually from 50x50 to its original size, which is. 250x250 (this growth will complete at 100%). Since the element has margin: 0 auto, it is always center aligned with respect to the container and so when it grows to its full size, it looks like the top-center point (50%, 0%) point is fixed and element expands towards right, left and bottom. Now this coupled with the clip-path produces the diagonal movement effect.

Snippet showing how the element grows without clip-path:

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  width: 250px;
  height: 250px;
  margin: 30px auto;
  text-align: justify;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%, 49% {
    height: 50px;
    width: 50px;
  }
  50%,
  100% {}
}

<div class="star">
</div>

Snippet showing the clip-paths effect at 5 stages during the growth:

Below snippet would make the reason for the slide more clear as you can see how the shape looks at 5 stages during the growth (from 50x50 to 250x250)

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  margin: 30px auto;
  text-align: justify;
  -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
}
.dim-50 {
  height: 50px;
  width: 50px;
}
.dim-100 {
  height: 100px;
  width: 100px;
}
.dim-150 {
  height: 150px;
  width: 150px;
}
.dim-200 {
  height: 200px;
  width: 200px;
}
.dim-250 {
  height: 250px;
  width: 250px;
}

<div class="star dim-50">
</div>
<div class="star dim-100">
</div>
<div class="star dim-150">
</div>
<div class="star dim-200">
</div>
<div class="star dim-250">
</div>

---

This is partly because of the clip-path and a lack of height and width setting within 50%, 100% keyframe. Since the element is only gradually growing from 50x50 to 250x250 (and it reaches its full size only by the end), the clip-path that you've designed based on original size (250x250) in mind actually starts working only at around 68.75% mark. This is because of the pixel values used in the clip-path. For example, the first point is 125,0 but the element's width is only 50px at 49% and so its width becomes 125px only at 68.75% (200px increase in 50% duration would mean 18.75% time for 75px increase assuming a linear timing function, for ease it'd be a bit longer but you get the point). Because of this, from the 50% mark approximately till the 68.75% mark you get to see nothing.

Another reason for the disappearance can also be attributed to the lack of a clip-path setting in the 0%, 49% keyframes. Because of this, the clip-path of the element is slowly animated from no clip at the start to the actual clip-path at 50% mark.

---

Solutions:

There are two solutions and they are as follows:

• Use your original approach, add height: 250px, width: 250px and border-radius: 0% to the 50%, 100% keyframes. Set a dummy clip-path on the element at 0%, 49% keyframes.

  body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    font-family: 'Lato', sans-serif;
  }
  .star {
    background-color: #f1c40f;
    color: white;
    width: 250px;
    height: 250px;
    margin: 30px auto;
    text-align: justify;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes example {
    0%, 49% {
      background-color: red;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      -webkit-clip-path: polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    }
    50%,
    100% {
      height: 250px;
      width: 250px;
      border-radius: 0%;
      shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
      shape-padding: 10px;
      -webkit-clip-path: polygon(125px 0px, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    }
  }

  <div class="star">
  </div>

• Set the element's height and width as 250px at the start of the animation itself, use a circular clip-path with 25px radius to produce the circle. This way we can avoid the need for a dummy clip-path. I prefer this approach just because it needs no dummy clip-path.

  body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    font-family: 'Lato', sans-serif;
  }
  .star {
    background-color: #f1c40f;
    color: white;
    width: 250px;
    height: 250px;
    margin: 30px auto;
    text-align: justify;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes example {
    0%, 49% {
      background-color: red;
      height: 250px;
      width: 250px;
      -webkit-clip-path: circle(25px at center);
    }
    50%,
    100% {
      height: 250px;
      width: 250px;
      shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
      shape-padding: 10px;
      -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    }
  }

  <div class="star">
  </div>

这篇关于关键帧动画从中心出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！