By

在早期的Web开发中，我们主要依赖js实现动画。但在css3中为我们提供了三种可用来做动画的方法：transition、transform和animation。

transition过渡

css3提供的transition属性的功能很简单，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值。
transition属性是一个简写的属性值，用于设置以下四个属性：

  • transition-property: 设置过渡效果的css属性名。
  • transition-duration: 设置完成该效果的过渡时间。
  • transition-timing-function: 设置过度时所用的速度。
    主要有的函数有：ease减速；linear匀速；ease-in加速；ease-out减速；ease-in-out先加速后减速。
  • transition-delay: 设置延迟时间。

语法顺序是：transition: property duration timing-function delay;

.box{
    transition: width 3s ease 1s;
}

transition的优点在于简单易用，但是它有几个很大的局限。

  1. transition需要事件触发，所以没法在网页加载时自动发生。
  2. transition是一次性的，不能重复发生，想要使用一次，就得触发一次。
  3. transition只能定义开始状态和结束状态，不能定义中间状态。
  4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

transform变换

transform属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform: rotate();旋转。单位是deg,度。对此，也衍生出了rotateX()和rotateY();分别代表绕着X轴和Y轴旋转。

transform: rotate(30deg);
transform: rotateX(30deg);
transform: rotateY(30deg);

transform: skew();倾斜。衍生出了skewX()和skewY();分别代表绕着X轴和Y轴倾斜。

transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);

transform: scale();缩放，按倍数计算。衍生出了scaleX()和scaleY();分别代表缩放X轴或Y轴。

transform: scale(1.2, 2);
transform: scaleX(1.2);
transform: scaleY(2);

transform: translate();位移。衍生出了translateX()和translateY();分别代表X轴或Y轴的位移量。

transform: translate(100px,200px);
transform: translateX(100px);
transform: translateY(200px);

animation动画

animation利用@keyframes关键帧完成动画的制作。其格式为@keyframes 动画名 {规则}。

@keyframes changeBg{
    0%{
        background: red;
    }
    20%{
        background: blue;
    }
    50%{
        background: orange;
    }
    100%{
        background: red;
    }
}；

animation是一个简写的属性值，包括以下几个属性：

  • animation-name: 动画名称
  • animation-duration: 完成动画所需时间
  • animation-timing-function: 完成动画的速度函数
  • animation-delay: 延迟时间
  • animation-iteration-count: 播放次数。默认1，其中，infinite表示无限次播放。
  • animation-direction: 是否轮流反向播放动画。normal正常播放；alternate奇次数反向播放。

语法：animation: name duration timing-function delay iteration-count direction;

.box{
    animation:changeBg 3s ease 1s infinite;
}

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：使用transition属性只能通过指定属性的初始状态和结束状态，然后在两个状态之间进行平滑过渡的方式来实现动画；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。