【九月打卡】第14天 前端工程师2022版 过渡与动画第一讲

课程名称：前端工程师2022版

课程章节：过渡与动画

课程讲师： elex

课程内容：

过渡的四个参数是什么意思？什么是过渡的活动效果？

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

transition-property // 哪些属性要过渡

transition-duration // 动画时间

transition-timing-function // 动画变化曲线（缓动效果）

transition-delay // 延迟时间

例如：transition: all 1s linear 0s;

什么属性能能够过渡？

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

背景颜色和文字颜色都可以被过渡；

所有变形（包括2D和3D）都能被过渡。

如何定义和调用动画？无限调用怎么做？

可以使用@keyframes来定义动画；

例如// @keyframes r { // 动画的名字

    from { // 起始状态transform: rotate(0); }

    to { // 结束状态 transform: rotate(360deg); }

}

定义动画之后可以使用animation属性调用动画；

例如 animation: r 1s linear 0s;

// r: 动画名字

// 1s: 动画时长

// linear: 缓动效果

// 0s: 延迟

// infinite: 永远执行参数。

// alternate 交替参数

例如：animation: movelr 2s linear 0s infinite alternate;

如果想让动画停止在最后结束状态，那么要加上forwards(保留参数)。

课程收获：

谢谢老师，讲的非常细致，很容易懂。