【金秋打卡】第1天 前端工程师2022版 前端基础入门

课程名称：过度的基本使用

课程章节：CSS3动画与穷游首页开发实战

课程讲师： 未知

课程内容：

一 transition过渡

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

二 兼容性

1. 
   

   1. 过渡从IE10开始兼容，移动端兼容良好

   2. 曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡

   3. 优点：动画更细腻，内存开销小

三 transition属性基本使用

1. transition属性有4个要素，注意s不能省略

2. 
   

            3.

.box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    transition: width 5s linear 0s;
}
.box1:hover {width: 800px}
<div class="box1"></div>

四 哪些属性可以参与过渡

1. 
   

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

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

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

五 all

1. 
   

   1. 如果要所有属性都参与过渡，可以写all

   2. transition: all 1s linear 0s;

六 过渡的四个小属性

1. 
   

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

第二次刷了,纯属复习了