CSS3动画 ☞ animation-time-function ☞ step属性

最新推荐文章于 2022-06-20 11:34:13 发布

若叶岂知秋vip

最新推荐文章于 2022-06-20 11:34:13 发布

阅读量1.2k

点赞数

分类专栏： H5/CSS3 文章标签： css3 动画

本文链接：https://blog.csdn.net/gccll/article/details/51676082

版权

H5/CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3动画 ☞ animation-time-function ☞ step属性

动画属性

animation-name: 给动画起的名字，在定义动画帧@keyframes时用
animation-duration：动画执行时间
animation-timing-function：动画帧执行函数，可以指定两个帧之间的过渡方式
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit
animation-delay：延迟动画执行时间
animation-iteration-count：动画执行次数，infinite:无限次
animation-direction：执行方向
animation-fill-mode：none|forwards|backwards|both|initial|inherit
animation-play-state：指定动画状态，paused | running | initial | inherit

概念（step(n, start/end)）

w3schools上的介绍：
The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval.

自己的理解（还不是完全理解o(╯□╰)o）：指定执行的帧的数量，大概意思就是有两个帧，将这两个帧之间的间隔平均分成n段去执行，start/end指定是跳跃到帧的开始还是帧的结尾，且这个step属性只针对每两个帧之间，而不是动画全过程。

demo

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
  .bird {
      min-width: 91px;
      min-height: 91px;
      position: absolute;
      left: 20px;
      Top: 50px;
      background: #fee url(images/step-anim/steps-test.png);
  }

 .birdFly {
     -moz-animation: bird-slow 2000ms steps(3, start) infinite;
     -webkit-animation: bird-slow 2000ms steps(3, start) infinite;
 }

 @keyframes bird-slow {
     0% {background-position-x: -0px;}
     // 分割成三帧执行 step(3, start)
     100% {background-position-x: -273px;}
 }
</style>
</head>
<body>
使用step属性实现帧动画
  <div class="bird birdFly"></div>
</body>
</html>

没啥内容，做个小记录，小笔记，嘿嘿- - ！不知道咋让运行结果的动画搞成图片弄上来，不知道有没有能在线编辑demo同时出效果的网站^_^!

若叶岂知秋vip

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3动画 ☞ animation-time-function ☞ step属性

CSS3动画 ☞ animation-time-function ☞ step属性动画属性animation-name: 给动画起的名字，在定义动画帧@keyframes时用animation-duration：动画执行时间animation-timing-function：动画帧执行函数，可以指定两个帧之间的过渡方式 linear|ease|ease-in|ease-out|ease-in
复制链接

扫一扫