4-CSS3动画

一、过渡与动画

1、过渡的基本使用

transition过渡属性是cSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。

transition属性有4个要素：transition: width 1s linear 0s;

width ：什么属性要过渡；1s：动画时长；inear：变化速度曲线；0s：延迟时间。

过渡要定义在元素的开始状态上，而不是结束状态上。

哪些属性可以参与过渡：

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity。

背景颜色和文字颜色都可以被过渡。所有变形（包括2D和3D）都能被过渡。

如果要所有属性都参与过渡，可以写all。transition: all 1s linear 0s;

过渡的四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果)
transition-delay	延迟时间

2、过渡的缓动效果

缓动参数：transition的第三个参数就是缓动参数，也是变化速度曲线。

transition : width 1s linear 0s ;

linear ：变化速度曲线

贝塞尔曲线

网站https: / /cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数。

transition: width 1s cubic-bezier(0.1，0.7，1.0， 0.1) 0s;

3、动画的定义和调用

动画的定义：
可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀。

动画的调用：
定义动画之后，就可以使用animation属性调用动画。

动画的执行次数：

第五个参数就是动画的执行次数，animation: r 1s linear 0s 3;（3是次数）

如果想永远执行可以写infinite。

如果想让动画的第2、4、6…(偶数次)自动逆向执行，那么要加上alternate参数即可；

animation : movelr 2s linear os infinite alternate;

如果想让动画停止在最后结束状态，那么要加上forwards；

animation: changeToCircle 1s linear 0s forwards;

多关键帧动画：

@keyframes flash {
      0% {
        transform:translate(0,0);
      }
      25% {
        transform:translate(100px,0);
      }
      50% {
        transform:translate(100px,100px);
      }
      75% {
        transform:translate(0,100px);
      }
      100% {
        transform:translate(0,0);
      }
    }

4、课程重点

过渡的四个参数是什么意思?什么是过渡的缓动效果?

什么属性能够过渡?

如何定义和调用动画?如果想无限调用动画，应该怎么做?