简述CSS3中的动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

  1. 在CSS3中的设置动画步骤:
    a、通过@keyframes指定动画序列;
    b、通过百分比将动画序列分割成多个节点;
    c、在各节点中分别定义各属性
    d、通过animation将动画应用于相应元素; 示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //定义规则 
    @keyframes move{
    //move为规则名称
    from{
    background-color:yellow;
    }
    to {
    background-color:red;
    } }
    //也可以以百分比的形式,设置多个节点
    @keyframes move{
    0%{
    background-color:yellow;
    } 50% {
    background-color:red;
    } 75% {
    background-color:green;
    } }
    //最后在animation属性里应用
    .div {
    animation:move 1s;
    }
  2. animation 中的属性简述
    a、animation-name设置动画序列名称;
    b、animation-duration动画持续时间;
    c、animation-delay动画延时时间;
    d、animation-timing-function动画执行速度,linear(平均)、ease(慢快慢)、ease-in(慢快)、ease-out(快慢)、cubic-bezier(自定义速度); e、animation-play-state动画播放状态,running、paused;
    f、animation-direction动画逆播,normal(正常,动画结束回到第一帧),reverse(与normal相反),alternate(动画完成,在倒放逆播),alternate-reverse(与alternate相反);
    g、animation-fill-mode动画执行完毕后状态,forwards(保持最后一帧的状态)、backwards(回到第一帧);
    h、animation-iteration-count动画执行次数,可以是1、2、3…inifinate表示无数次;
    i、steps(60) 这里表示动画分成60步完成,一帧一帧的进行,这是第一个参数,第二个参数(可选)为start或end,默认情况下为end; 关于start和end 的区别:他们都规定了动画时间变化点,start是在两帧跳换前,end是在两帧跳换后; 比如:分两步,0%-100%,盒子颜色变化从红色变到绿色 如果设置start,他在0%跳换前,动画就执行了,所以我们刷新页面一进去就看到绿色,设置end的话,我们会一直看到红色,0%前动画不会执行,跳到100%后动画结束,这是绿色状态不可见的,还会变成红色。
    总之,如果3s的动画执行时间,start和end的区别就是,到底是在3s前就执行,还是在3s后执行的区别。 参数值的顺序: 关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意 最后2个小例子熟悉一下: CSS3设置帧动画达到钟表效果: