CSS3动画几个平时没注意的属性

2017-11-08 1192

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一、timing-function: steps()

一开始在使用CSS3的时候并没有太注意这个timing-function，只是注意到自定义贝塞尔曲线。

1）一个项目中的实例

先来看看左边加了steps和右边没加的区别。左边的是一锤一锤的，右边会出现影子。

【注意下面这个demo在firefox中不能执行，只能在chrome中执行，因为我动画的是“background-image”属性】

代码如下，我只把关键的几个代码贴出来了，详细的可以查看这里：

.btn-pay {
  background: url(t_btn-pay.png) no-repeat -30px;
  animation: pay-interval 0.5s steps(1) infinite;
}
.btn-pay2 {
  animation: pay-interval 0.5s linear infinite;
}
@keyframes pay-interval {
  from {
    background-image: url(t_btn-pay.png);
  }
  30% {
    background-image: url(t_btn-pay-active.png);
  }
  to {
    background-image: url(t_btn-pay.png);
  }
}

2）参数说明

语法如下：

a. 第一个参数指定了时间函数中的间隔数量（必须是正整数），这个间隔数量作用用于两个关键帧之间，也就是form与30%之间、30%与to之间。

b. 第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

我在CSS中设置了1（这个例子中start与end区别不大），也就是一步一步动画，而如果不设置，那其实里面就会有多步操作，就会出现影子。

国外有篇文章中写了个例子，可以区分这两个值的区别，demo链接可以点击这里，具体的原理可以在网上搜索。

.contain-car {
  animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
  animation: drive 4s steps(4, start) infinite;
}

3）通过sprite图片制作动画

通过合成的图片，再设置个间隔数，就能出现动画了，例如下面的这张loading图片，点击查看在线demo。

.loading {
  animation: loading-rotate 1s steps(12) infinite;
}

二、animation-direction

animation-direction 定义是否应该轮流反向播放动画，选项有normal、alternate（交替）、reverse（反向）等。

1）一个项目中的实例

左边的抖动明显要流畅很多，而右边的抖动在完成100%以后就直接跳回到0%的状态。

代码如下，我只把关键的几个代码贴出来了，详细的可以查看这里：

.img1 {
  animation: tel-rotate 1s linear infinite alternate;
}
.img2 {
  animation: tel-rotate 1s linear infinite;
}
@keyframes tel-rotate {
  from {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  to {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
}