关键帧动画语法

最新推荐文章于 2022-07-20 16:57:41 发布

cunqu9743

最新推荐文章于 2022-07-20 16:57:41 发布

阅读量365

点赞数

文章标签： java css python html javascript ViewUI

基本声明和用法

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

为了简洁起见，此页面上的其余代码将不使用任何前缀，但实际使用情况应使用上面的所有供应商前缀

多个步骤

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   animation: fontbulger 2s infinite;
}

如果动画的开始和结束属性相同，则一种方法是用逗号分隔0％和100％值：

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

或者，你总是可以告诉动画运行两次（或次任意偶数），并告诉的方向alternate 。

调用具有单独属性的关键帧动画

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

动画速记

只需将所有单个值用空格分隔。顺序无关紧要，除非同时使用持续时间和延迟，否则它们必须保持该顺序。在下面的示例中，1s =持续时间，2s =延迟，3 =迭代。

animation: test 1s 2s 3 alternate backwards

结合变形和动画

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

多种动画

您可以使用逗号分隔值以在选择器上声明多个动画。

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

脚步（）

steps（）函数可精确控制在动画时间范围内将渲染多少个关键帧。假设您声明：

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

如果在动画中使用step（10），将确保在分配的时间内仅发生10个关键帧。

.move {
  animation: move 10s steps(10) infinite alternate;
}

那里的数学很好。每隔一秒钟，该元素将向左移动10px，向下移动10px，直到动画结束，然后永远反向。

对于像simurai的演示这样的spritesheet动画来说，这可能很棒。

浏览器支持

该浏览器支持数据来自Caniuse ，其更多信息。数字表示浏览器支持该版本及更高版本的功能。

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
4 *	5 *	10	12	5.1 *

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
81	68	4 *	6.0-6.1 *