transition 过渡

示例：

  1. div {
  2.   width: 100px;
  3.     transition: all .5s ease;
  4. }
  5. div:hover {
  6.   width:50px;
  7. }
属性名 用途 取值
transition-property 要过渡的属性 width、background等
transition-duration 过渡持续时间 毫秒/秒 1000/1s
transition-timing-function 过渡加速度曲线 ease、ease-in-out、linear
transition-delay 过渡等待时间 1s

animation 动画

首先需要声明 @keyframes 动画，然后通过 animation 属性调用动画：

  1. @keyframes hide {
  2.   from {
  3.       opacity: 1;
  4.   }
  5.   to {
  6.       opacity: 0;
  7.   }
  8. }
  10. @keyframes show {
  11.   0% {
  12.       opacity: 0;
  13.   }
  14.   100% {
  15.       opacity: 1;
  16.   }
  17. }
  19. .block:hover {
  20.     animation: hide .5s ease 1s infinite alternate;
  21. }

animation子属性：

属性名 用途
animation-name 指定要使用的动画 @keyframes 名称
animation-duration 指定动画完成的时间
animation-timing-function 指定动画加速度曲线
animation-delay 指定动画延迟等待时间
animation-iteration-count 指定动画重复次数，可选指定次数或无限次 1、infinity
animation-direction 指定动画是否循环交替反向播放：normal、alternate 等

flex 布局

父元素使用 display: flex; 实现弹性布局。
相关属性：

flex-direction 弹性盒元素方向：row、column
flex-wrap 弹性盒元素是否折行：wrap、nowrap
flex-flow direction和wrap的简写：row nowrap;
justify-content 主轴对齐方式：
flex-start、flex-end、center、space-between、 space-around
align-item 交叉轴对齐方式：
flex-start、flex-end、center、baseline、stretch

子元素的 flex 属性：

flex-grow 指定flex盒子中占剩余空间的比例 1、2、3
flex-shrink 指定撑满父元素后的元素收缩量
flex-basis 定义主轴方向上的初始大小
flex 上述三种属性的简写