关键帧动画从中心出现 [英] Keyframe animation appearing from the center

查看：167 发布时间：2016/5/15 21:37:02 html css css3 animation css-animations

本文介绍了关键帧动画从中心出现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

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

有谁知道我做错了？

 {体\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
  }

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

解决方案

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

这是因为什么可能是在下面的行一个错字错误。您已设置转发来迭代次数财产，因此动画填充模式需要它的默认值（这是无）。这使得 div.star 来快速返回到原来的形状，一旦在完成动画（动画，方形的开始之前的一个）。删除转发从下面的行并将其设置为正确的属性将解决这个问题。
 动画迭代计数：1向前;
 
我怎样才能从中心出现，而不是在左上角的对角线滑动的明星？

好了，渐渐出现由中心（如同其生长）的明星将是几乎不可能。我将稍后解释为什么一部分，但为什么明星看起来是滑动角是相当简单的解释。元素的初始尺寸是250x250的，一旦动画开始是50×50，并保持到这样49％动画。在 50％没有高度或宽度是指定的，所以元素开始从50x50的逐步成长到原来的大小，这就是生活。 250x250的（这种增长将在100％完成）。由于该元素具有保证金：0汽车，它始终是中心，就对准容器，所以当它长到它的全尺寸，它看起来像顶中心点（50％，0％）点是固定的，元件朝向右侧，左侧和底部膨胀。现在，这再加上夹路径产生对角线的运行效果。
片段显示元素是如何生长的，而不夹路径：

\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   动画名称：例如，\r   动画持续时间：4秒\r   动画迭代计数：1;\r   动画填充模式：前锋;\r }\r 例如@keyframes {\r   0％，49％{\r     高度：50像素;\r     宽度：50像素;\r   }\r   50％\r   100％{}\r }
\r
＆LT; DIV CLASS =明星＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r
片段显示了生长过程中的5个阶段剪辑路径的效果：
下面片段将使该幻灯片，你可以看到在生长过程中的形状如何看待5个阶段（50×50，从到250x250的）更清晰的原因

\r
\r
{体\r   背景颜色：＃F5F5F5;\r   颜色：＃555;\r   字体大小：1.1em;\r   FONT-FAMILY：'拉托'，无衬线;\r }\r .star {\r   背景颜色：＃f1c40f;\r   颜色：白色;\r   保证金：30PX汽车;\r   文本对齐：理由;\r   -webkit-夹路径：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r }\r .dim伪-50 {\r   高度：50像素;\r   宽度：50像素;\r }\r .dim伪-100 {\r   高度：100像素;\r   宽度：100像素;\r }\r .dim伪-150 {\r   高度：150像素;\r   宽度：150像素;\r }\r .dim伪-200 {\r   高度：200像素;\r   宽度：200像素;\r }\r .dim伪-250 {\r   高度：250像素;\r   宽度：250像素;\r }
\r
＆LT; DIV CLASS =明星暗淡-50＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =明星暗淡-100＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =明星暗淡-150＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =明星暗淡-200＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =明星暗淡-250＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r
为什么我的红色圆圈消失一两秒钟，然后明星出现？

这部分是因为夹路径和缺乏对高度和宽度在 50％，100％关键帧设置。由于该元素仅逐渐从50×50生长到250×（和它仅由最终达到其全尺寸），在夹路径你已经根据原稿尺寸设计广告（250x250）考虑实际启动仅在各地工作的 68.75％标记。这是因为在使用的像素值夹路径的。例如，第一点是125,0但元素的宽度仅为50像素的 49％等其宽度仅在 68.75％变为125px （在 50％持续时间将意味着 18.75％时间为960x75像素的增加假设线性计时功能，为便于它会是长一点，但你明白了吧）。正因为如此，从50％大关约，直到68.75％大关，你能看到什么。
另一个原因消失，也可以归因于缺乏夹径中设置 0％，49％关键帧。正因为如此，该元件的夹持路径缓慢地从没有剪辑的开始到实际夹子径在50％标记的动画
解决方案：
有两种解决方案，它们是：

使用你原来的做法，加入高度：250像素，宽度：250像素和边界半径：0％到 50％，100％关键帧。在 0％，49％关键帧。
设置元素的虚拟剪辑路径

\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   动画名称：例如，\r   动画持续时间：4秒\r   动画迭代计数：1;\r   动画填充模式：前锋;\r }\r 例如@keyframes {\r   0％，49％{\r     背景色：红色;\r     高度：50像素;\r     宽度：50像素;\r     边界半径：50％;\r     -webkit夹路径：多边形（0,0 50像素0，50像素50像素，50像素0，0 0，0 0，0 0，0 0，0 0，0 0）;\r   }\r   50％\r   100％{\r     高度：250像素;\r     宽度：250像素;\r     边界半径：0％;\r     形状里面：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r     形状填充：10px的;\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; DIV CLASS =明星＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r

设置元素的高度和宽度为250像素的动画本身的开始，用圆形夹路径与25px的半径产生的圈子。这样，我们才能避免虚夹路径的需要。我preFER这种做法只是因为它不需要虚夹路径。

\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   动画名称：例如，\r   动画持续时间：4秒\r   动画迭代计数：1;\r   动画填充模式：前锋;\r }\r 例如@keyframes {\r   0％，49％{\r     背景色：红色;\r     高度：250像素;\r     宽度：250像素;\r     -webkit-夹路径：圆（25px的中锋）;\r   }\r   50％\r   100％{\r     高度：250像素;\r     宽度：250像素;\r     形状里面：多边形（125px 0 175px 85px，250像素90像素，190px 160像素，225px 250像素，125px 210px，25px的250像素，60像素160像素，0像素90像素，960x75像素85px）;\r     形状填充：10px的;\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; DIV CLASS =明星＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r

I am creating a keyframe transition sequence. I am wanting the circle to appear for two seconds and then the star to appear for the other two seconds. I am running into a couple of issues.

Why is my star turning into a rectangle at the end of the animation?

How can I get the star to appear from the center rather than the top-left corner sliding in diagonally?

Why does my red circle disappear for a second or two and then the star appear?

Does anyone know what I am doing wrong?
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;
  -webkit-animation-name: example;  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;  /* Chrome, Safari, Opera */
  -webkit-animation-iteration-count: 1 forwards;  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1 forwards;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  0%, 49% {
    background-color: red;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  50%,
  100% {
    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;
    /*transition: all 1s ease; */
    -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
  }
  /* Standard syntax */
  @keyframes example {
    0%, 49% {
      background-color: red;
      left: 0px;
      top: 0px;
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    50%,
    100% {
      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;
      /* transition: all 1s ease; */
      -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>
解决方案

Why is my star turning into a rectangle at the end of the animation?

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;
How can I get the star to appear from the center rather than the top-left corner sliding in diagonally?

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>
Why does my red circle disappear for a second or two and then the star appear?

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

查看全文

关键帧动画从中心出现 [英] Keyframe animation appearing from the center

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

关键帧动画从中心出现 [英] Keyframe animation appearing from the center

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭