CSS学习笔记--过渡模块

CSS学习笔记–过渡模块

 
一、过渡模块( transition )：必须要有属性发生改变
 1.告诉系统哪个属性需要执行过渡效果（ transition-property: 属性名称 ）;
 2.告诉系统过渡效果持续的时长（ transition-duration： 时间 s）;
 
 注意点：
 1.层叠样式列表会发生层叠，所以相同的属性不能写在后面；
 2.个属性需要同时执行过渡效果时，用逗号隔开即可；例如： transition-property: width, background-color; (即宽度和背景颜色都要求随时间的变化)
 
二、过渡三要素：
 1.必须有属性发生变化（即，如宽度由10px到100px）；
 2.必须告诉系统那个属性需要执行过渡效果(即，如宽/高度，颜色等属性);
 3.必须告诉系统过渡效果持续的时长；
 
 补充点：
 1.告诉系统延迟多少秒之后才开始过渡动画：transition-delay ;
 2.告诉系统过渡动画的运动速度：
  transition-timing-function:
        (匀速) linear
     (逐渐慢下来) ease
        (加速) ease-in
        (减速) ease-out
   （先加速后减速）ease-in-out
 
三、过渡连写格式：
 1.格式： tansition: 过渡属性 过渡时长 运动速度 延迟时间；（例： transition： width 5s linear 0s )
 2.过渡连写注意点：
  2.1 分开写时一样，如果想给多个属性添加过渡效果也是用逗号隔开即可；（例：transition: width 5s linear 0s , background-color 4s linear 0s )
  2.2 写的时候可以省略后面的两个参数，因为只要编写了前面两个参数就已经满足了过渡的三要素；
  2.3 如果多个属性的运动的速度/延迟时间/持续时间都一样，那么可以简写为：transition: all 5s (即所有属性过渡时间都为5s)
 
四、编写过渡的套路：
 1.不要管过度，先编写基本界面；
 2.修改我们认为需要修改的属性；
 3.在回过头去给被修改属性的那个元素添加过渡即可；
 
 
 

---

===笔记内容来自于《从零玩转HTML5前端+跨平台开发》